I have a child component inside kendo ui angular Panelbar to which i need to pass the id, but it comes as undefined in the api url. Here is the code:
<kendo-panelbar [expandMode]="kendoPanelBarExpandMode">
<kendo-panelbar-item *ngFor="let event of events" [title]="event.title">
<ng-template kendoPanelBarContent>
<br>
{{event.id}}
<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-
emp-list>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar>
I think that the problem is this
change the line
<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-emp-list>
to this
<app-volunteering-emp-list [eventID]="event.id"></app-volunteering-emp-list>
parent.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}
child.component.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-child',
template: `
Say {{ message }}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
#Input() childMessage: string;
constructor() { }
}
Related
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]);
}
});
}
}
I am trying to integrate Emoji in my Angular 6 Chat application using the library called ngx-emoji-mart
below is my code
My template file - chat.component.html
<div #emojiDiv class="emojiInput" contentEditable="true" [innerHTML]="input" >
</div>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
My component class - chat.component.ts
import { Component, OnInit, ViewEncapsulation, ElementRef } from '#angular/core';
#Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
public addEmoji(){
if(this.input) {
this.input = this.input + "<ngx-emoji emoji='point_up'></ngx-emoji>";
} else{
this.input = "<ngx-emoji emoji='point_up'></ngx-emoji>";
}
}
}
But is not appending to div.
Is there something else I need to add? Thanks in advance
npm install #ctrl/ngx-emoji-mart
import { PickerModule } from '#ctrl/ngx-emoji-mart'
add the stylesheet in angular.json:
"styles": [
"src/styles.css",
"../node_modules/#ctrl/ngx-emoji-mart/picker.css"
],
add this app.module.ts:
#NgModule({
...,
imports: [ ..., PickerModule, ... ],
...
})
Add this in app.component.html
<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
Hola !!
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.
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>
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);