Angular2: how can component bind to class? - components

I can't find the obvious evidence that how a #Component() binds to a class.
How can it know component binds with class RedditArticle instead of class Article? After switching the position of the two class, it is messed up. Does that mean the class we need to bind should followed by the corresponding component?
import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";
#Component({
selector: 'reddit-article',
template: `
<div class="row">
<div class="col-md-3"></div>
<div>Points: {{article.votes}}</div>
<div class="col-md-9"></div>
<!--<div class="row">-->
Title: {{article.title}}
Link: {{article.link}}
<button (click)="voteUp()">upvote</button>
<button (click)="voteDown()">downvote</button>
<!--</div>-->
</div>
`
})
class RedditArticle {
article: Article;
constructor() {
this.article = new Article('angular2', 'google.com', 0);
}
voteUp() {
this.article.votes++;
}
voteDown() {
this.article.votes--;
}
}
class Article {
title: string;
link: string;
votes: number;
constructor(title: string, link: string, votes: number) {
this.title = title;
this.link = link;
this.votes = votes;
}
}

The #Component() decorator applies directly to the class that follows the annotation.
This is the same for all annotations.
For example
constructor(#Inject('xxx') private val:string, private zone:NgZone) {}
Here #Inject() is bound to val

Related

add custom image to azure maps

I am using this wrapper for the azure maps library. I am currently implementing a symbol layer and using one of the default markers works well, but I am not able to add my own marker. I tried to add a custom marker like in my mapReady function, but the response is always undefined and the image is not added.
this is my component:
import {Component, Input, OnInit} from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
private markerImagePath = 'assets/images/map-marker.png';
public dataSource: atlas.source.DataSource;
markerDescription: 'marker';
public options: atlas.IconOptions = {
image: this.markerDescription
};
points = [
[52.52437, 13.41053],
[51.50853, -0.12574]
];
ngOnInit() { }
mapReady(map: atlas.Map) {
map.imageSprite.add(this.markerDescription, this.markerImagePath).then(r => {
console.log(r);
console.log(map.imageSprite.getImageIds());
this.dataSource = new atlas.source.DataSource('markers');
this.points.forEach(p => {
const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
this.dataSource.add([point]);
});
});
}
}
this is my html:
<section>
<div class="row">
<div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
[dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
<map-symbol-layer dataSourceId="markers"
[iconOptions]="options"></map-symbol-layer>
</div>
</div>
</section>
I suspect, that I access the map data wrongly... Do any of you guys know, how I can add a custom image to the imageSprites in order for me to use it as a marker in the symbol layer?
Your code looks fine. imageSprite.add returns a Promise<void>, so your console.log will always log undefined. Could your icon be the issue ? I have been trying a similar solution and all works fine on my side :
import { Component } from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-root',
template: '<azure-map zoom="2" [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">' +
'<map-symbol-layer [id]="blueLayerId" dataSourceId="blue" [iconOptions]="blueIconOptions"></map-symbol-layer>' +
'</azure-map>',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public dataSource: atlas.source.DataSource;
public blueLayerId: string = "blueLayer";
public blueIconOptions: atlas.IconOptions = {
image: 'campground'
};
mapReady(map: atlas.Map) {
map.imageSprite.add('campground', 'assets/campground.png').then(() => {
this.dataSource = new atlas.source.DataSource('blue');
for (let i = 0; i < 10; i++) {
const point = new atlas.Shape(new atlas.data.Point([i * 5, i * 5]));
this.dataSource.add([point]);
}
});
}
}

Perform action in parent on child event click

So I'm trying to perform some action on the parent component of the child component when a click event is fired in the child component. Currently I have a dynamic loader which is able to load different child components. The problem I have is that the #Output() is being emitted but the parent component doesn't seem to have any knowledge when this event is fired. Is there something I am missing?
child2.component.ts
import {Component, Injector, Output, EventEmitter} from '#angular/core';
#Component({
selector: 'hello-world',
template: `
<div>Hello World {{showNum}}</div>
<li (click)="childButtonClicked(false)"> </li>
`,
})
export class HelloWorldComponent {
showNum = 0;
#Output() childEvent = new EventEmitter<boolean>();
constructor(private injector: Injector) {
this.showNum = this.injector.get('showNum');
console.log("HelloWorldComponent");
}
childButtonClicked(agreed: boolean) {
this.childEvent.emit(agreed);
console.log("clicked");
}
}
child1.component.ts
import {Component, Injector, Output, EventEmitter} from '#angular/core';
#Component({
selector: 'world-hello',
template: `
<div>World Hello {{showNum}}</div>
<li (click)="childButtonClicked(false)"> </li>
`,
})
export class WorldHelloComponent {
showNum = 0;
#Output() childEvent = new EventEmitter<boolean>();
constructor(private injector: Injector) {
this.showNum = this.injector.get('showNum');
console.log("WorldHelloComponent");
}
childButtonClicked(agreed: boolean) {
this.childEvent.emit(agreed);
console.log("clicked");
}
}
dynamic.componentloader.ts
import {Component, Input, ViewContainerRef,ComponentRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '#angular/core';
#Component({
selector: 'dynamic-component',// Reference to the components must be here in order to dynamically create them
template: `
<div #dynamicComponentContainer></div>
`,
})
export class DynamicComponent {
currentComponent:any = null;
#ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;
// component: Class for the component you want to create
// inputs: An object with key/value pairs mapped to input name/input value
#Input() set componentData(data: {component: any, inputs: any }) {
if (!data) {
return;
}
// Inputs need to be in the following format to be resolved properly
let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
// We create an injector out of the data we want to pass down and this components injector
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector);
// We create a factory out of the component we want to create
let factory = this.resolver.resolveComponentFactory(data.component);
// We create the component using the factory and the injector
let component = factory.create(injector);
// We insert the component into the dom container
this.dynamicComponentContainer.insert(component.hostView);
// We can destroy the old component is we like by calling destroy
if (this.currentComponent) {
this.currentComponent.destroy();
}
this.currentComponent = component;
}
constructor(private resolver: ComponentFactoryResolver) {
}
}
main.component.ts
import { Component, OnInit } from '#angular/core';
import { HelloWorldComponent } from '../../views/main/sidebar-views/comps/hello-world.component';
import { WorldHelloComponent } from '../../views/main/sidebar-views/comps/world-hello.component';
#Component({
selector: 'main-component',
template: require('./main.component.html')
})
export class MainComponent {
private pressed: boolean = false;
componentData:any = null;
constructor() { }
createHelloWorldComponent(){
this.componentData = {
component: HelloWorldComponent,
inputs: {
showNum: 9
}
};
}
createWorldHelloComponent(){
this.componentData = {
component: WorldHelloComponent,
inputs: {
showNum: 2
}
};
}
test(){
console.log("some click event");
}
};
main.component.html
<div>
<h2>Lets dynamically create some components!</h2>
<button (click)="createHelloWorldComponent()">Create Hello World</button>
<button (click)="createWorldHelloComponent()">Create World Hello</button>
<dynamic-component [componentData]="componentData" (childEvent)="test()"></dynamic-component>
</div>
Since you are passing a parameter to the EventEmitter, you need to change your event binding on your component selector in your template to this:
<dynamic-component [componentData]="componentData" (childEvent)="test($event)"></dynamic-component>
Also, don't forget to change function signature in your component to accept the parameter:
test(agreed: boolean){
console.log("some click event");
}
More info on official docs.

How to connect second datasource to the same kendo-grid

I want to use the second datasource [data] to replace the IDs of a column with the NAMEs from another table(from another datasource) which have a common ID field. I have tried with kendo-grid-span-column, but it is working only with the same datasource as the grid.
<form novalidate #myForm="ngForm">
<kendo-grid
[data]="gridData | async"
<kendo-grid-column field="Contract_id" title="Contract_id"></kendo-grid-column>
<kendo-grid-span-column>
<kendo-grid-column field="Employee_id" title="Employee_id">
</kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem>
<h4>{{dataItem.NameFromAnotherDataSource}}</h4>
</ng-template>
</kendo-grid-span-column>
<kendo-grid-column field="Contract_Num" title="Contract_Num"></kendo-grid-column>
</kendo-grid>
Any ideas?
Thanks,
Martin
I found the way.
container.component.html
<kendo-grid-column field="Employee_id" title="Employee" width="200">
<ng-template kendoGridCellTemplate let-dataItem>
<h4>{{category(dataItem.Employee_id)?.Name}}</h4>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter>
<my-dropdown-filter
[filter]="filter"
[data]="employees"
textField="Name"
valueField="Employee_id">
</my-dropdown-filter>
</ng-template>
container.component.ts
private employees;
constructor(
public dataServiceEmployees: EmployeesDashboardService,
) {
this.dataServiceEmployees.fetch('Employee',this.gridState).subscribe((x) => this.employees = x.data);
}
public category (id: number): any {
if(this.employees){
return this.employees.find(x => x.Employee_id === id);
}
}
And using a filter template:
custom.filter.ts
import { Component, Input } from '#angular/core';
import { CompositeFilterDescriptor } from '#progress/kendo-data-query';
import { FilterService, BaseFilterCellComponent } from '#progress/kendo-angular-grid';
#Component({
selector: 'my-dropdown-filter',
template: `
<kendo-dropdownlist
[data]="data"
(valueChange)="onChange($event)"
[defaultItem]="defaultItem"
[value]="selectedValue"
[valuePrimitive]="true"
[textField]="textField"
[valueField]="valueField">
</kendo-dropdownlist>
`
})
export class DropDownListFilterComponent extends BaseFilterCellComponent {
public get selectedValue(): any {
const filter = this.filterByField(this.valueField);
return filter ? filter.value : null;
}
#Input() public filter: CompositeFilterDescriptor;
#Input() public data: any[];
#Input() public textField: string;
#Input() public valueField: string;
public get defaultItem(): any {
return {
[this.textField]: "Избери...",
[this.valueField]: null
};
}
constructor(filterService: FilterService) {
super(filterService);
}
public onChange(value: any): void {
this.applyFilter(
value === null ? // value of the default item
this.removeFilter(this.valueField) : // remove the filter
this.updateFilter({ // add a filter for the field with the value
field: this.valueField,
operator: "eq",
value: value
})
); // update the root filter
}
}

Ionic 2 - How to reach a component from inside a directive?

I'm trying to build a directive to display a custom numpad when
the control (input) on which the directive is applied is clicked.
I'm Working on Ionic 2 RC5.
myPage.html
<ion-content>
<ion-item>
<ion-label stacked>Label</ion-label>
<ion-input dirNumpad type="text" [(ngModel)]="myField"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<numpad #idNumpad hidden></numpad>
</ion-footer>
The Numpad component is in the DOM, at the bottom of the page.
dirNumpad.ts
import { Directive, ElementRef, ViewChild } from '#angular/core';
import { Numpad } from '../../components/numpad/numpad';
#Directive({
selector: '[dirNumpad]', // Attribute selector
host: {
'(click)': 'onClick()'
}
})
export class DirNumpad {
#ViewChild('idNumpad') numpad: Numpad;
constructor( private el: ElementRef ) {
}
onClick() {
this.showNumpad();
}
showNumpad() {
console.log(this.numpad); => undefined
this.numpad.show(); => error: show property does not exist on undefined
}
}
numpad.html
<div class="numpad" style="position:absolute; top:auto; left:0;
right:0; bottom:0; height:150px;">My Numpad</div>
numpad.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'numpad',
templateUrl: 'numpad.html'
})
export class Numpad {
constructor() {}
}
My problem: I can not reach the numpad component from inside the directive through ViewChild.
console.log(this.numpad) always returns "undefined"!
I need it to show the numpad only if user clicks on the input on which the directive is applied...
What am I doing wrong?
I'm stucked with this problem, so any help will be appreciated.
ViewChild only applies to the children items of the item. Since the component is not a child in any way of the directive but rather a sibling it cant be received in ViewChild.
You can pass it as part of an input
Declare an input in your component
import { Directive, ElementRef, Input } from '#angular/core';
import { Numpad } from '../../components/numpad/numpad';
#Directive({
selector: '[dirNumpad]', // Attribute selector
host: {
'(click)': 'onClick()'
}
})
export class DirNumpad {
#Input('numpad') numpad: Numpad;
constructor( private el: ElementRef ) {
}
onClick() {
this.showNumpad();
}
showNumpad() {
console.log(this.numpad); => undefined
this.numpad.show(); => error: show property does not exist on undefined
}
}
and set it in your html
<ion-content>
<ion-item>
<ion-label stacked>Label</ion-label>
<ion-input dirNumpad [numpad]="idNumpad" type="text" [(ngModel)]="myField"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<numpad #idNumpad hidden></numpad>
</ion-footer>

Data-binding not working with dynamic component loader in angular2-universal-starter [duplicate]

This question already has an answer here:
Error if don't check if {{object.field}} exists
(1 answer)
Closed 6 years ago.
I am using angular2-universal-starter project.
So i was trying to pass an object to a child component using #Input , but its not working correctly.
I have used dynamic component loader to load child component and I want to pass the object to child component.
Following is my code snippet:
app.component.ts
import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {Http} from 'angular2/http';
import {headingComponent} from './heading.component';
#Directive({
selector: '[x-large]'
})
export class XLarge {
constructor(element: ElementRef, renderer: Renderer) {
// we must interact with the dom through Renderer for webworker/server to see the changes
renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
}
}
#Component({
selector: 'app',
directives: [
XLarge
],
template: `
<div>
<div>
<span x-large>Hello, {{ user.name }}!</span>
</div>
<icici-heading [user]="user"></icici-heading>
</div>
`
})
export class App {
public user;
constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
dcl.loadNextToLocation(headingComponent, elementRef);
}
ngOnInit(){
this.user = { "id": 11, "name": "Mr. Nice" };
}
}
heading.component.ts
import {Component, OnInit,Input} from 'angular2/core';
#Component({
selector: 'icici-heading',
template: `
<div>
<!--{{user.name}}-->this is not working
{{name}}
</div>
`
})
export class headingComponent implements OnInit {
#Input() user;
name: string;
constructor() { }
ngOnInit() {
this.name="heading is rendered";
}
}
I guess you just need to make your code more forgiving when the value is not yet available.
This will work:
{{user?.name}}
The Elvis or safe-navigation operator only evaluates .name when user != null
For dynamically added components you also need to pass values imperatively
dcl.loadNextToLocation(headingComponent, elementRef)
.then(cmpRef => cmpRef.instance.user = this.user);

Resources