I have a parent component and a child component, I want to send 2 values from the child component via EventEmitter to the parent component as I want to use the printMessages() function there.
I have a click event on the child component which emits 2 string values, but I'm unsure how to connect the emit event to the parent component and for the printMessages() function to run. How can the parent component read these values into the "printMessages()" function and for that function to run after the values have reached it? As you can see, I currently have no HTML in the parent component, perhaps I need to do something there?
Parent Component:
import { Component } from '#angular/core';
#Component({
selector: 'parent-component',
template: ``,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
// Function in which I want to send values from the child component.
printMessages(string1: string, string2: string) {
console.log(string1, string2);
}
Child Component:
import { Component, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'child-component',
template: `
<button (click)="sendStrings()">Send Strings</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
#Output() message = new EventEmitter();
constructor() { }
sendStrings(){
this.message.emit({string1:"Hello", string2:"World!"});
}
}
You need to react on the child components event within the template and call the method.
import { Component } from '#angular/core';
#Component({
selector: 'parent-component',
template: `<child-component (onMessage)="printMessages(e)"></child-component>`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
printMessages(event) {
// strings are included in event object
}
}
This is my component's typescript code:
import { Component, Input, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { Observable } from 'rxjs';
#Component({
selector: 'app-counter-output',
templateUrl: './counter-output.component.html',
styleUrls: ['./counter-output.component.css']
})
export class CounterOutputComponent implements OnInit {
counter!: number;
counter$!: any;
constructor(private store: Store<{ counter: { counter: number } }>) {
}
ngOnInit(): void {
this.store.select('counter').subscribe((data) => {
this.counter = data.counter;
console.log(data);
});
this.counter$ = this.store.select('counter');
console.log(this.counter$);
}
}
This is its HTML template:
<div>This is the counter:{{(counter$|async).counter}}</div>
<div>This is the counter:{{counter}}</div>
There is an error in line no 1 in the HTML file.
When I am subscribing in the typescript file I am able to get the value, but when I am using it as an observable it is showing an error.
Set a type to counter$.
export interface Counter {
counter: number;
}
....
counter$: Observable<Counter>;
Of course, you have to be sure that the selector returns Counter as data.
EDIT: If you insist to use any (which beats the purpose of using Typescript), you can use the $any() type cast function to suppress this error.
<div>This is the counter:{{ ($any(counter$|async)).counter }}</div>
Have you tried to actually define your counter$ property as an Observable?
Why declare it as any if you already know what type of data is?
export interface myInterfaceData {
counter: number;
}
counter$!: Observable<myInterfaceData>;
<ng-container *ngIf="{ myCounter: counter$ | async } as observable">
<div>
This is the counter: {{ observable.myCounter?.counter }}
</div>
</ng-container>
I would like a component to send input to another component. Below is the code .ts and .html. of the two components.
Now the problem is that the html page of the parent component also shows the html part of the child component ... I want the component to pass only one string to the child component
Parent.ts
import ...
#Component({
selector: 'app-parent',
templateUrl: './parent.html',
styleUrls: ['./parent.css']
})
export class ParentComponent implements OnInit {
sostegno : string;
constructor() { }
ngOnInit() { }
avvia1() {
this.sostegno = "xxx";
this.router.navigate(['./xxx'], { relativeTo: this.route });
}
avvia2()
this.sostegno = "yyy";
this.router.navigate(['./yyy'], { relativeTo: this.route });
}
}
Parent.html
<div>
...
</div>
<app-child [sostegno]="sostegno"></app-child>
Child.ts
import ...
#Component({
selector: 'app-child',
templateUrl: './child.html',
styleUrls: ['./child.css']
})
export class ChildComponent implements OnInit {
#Input() sostegno : string;
constructor() { }
ngOnInit() {
console.log(this.sostegno);
}
}
There are some changes which you need to make because looking at the code which your currently have it seems incomplete.
You are using this.router without injecting the Router class in your constructor.
You are using this.route without injecting the ActivatedRoute class in your constructor.
To test that your parent > child interaction is working you can remove your param and instead place a test for the html
<app-child [sostegno]="'Test'"></app-child>
This should work for your ngOnInit function which is inside of your child component. If this works all you need to do now is either initialize sostegno in your parent component else your console log inside your child component will not reflect the changes when you call avvia1 or avvia2 inside of your parent class.
Hope this helps!
I have a Directive which goal is to add a suggestion list under a prefix-field-text component. This component is basically a searchbar.
My directive currently look like this (in all my code pieces I removed imports to add readibility):
#Directive({
selector: '[prefixSuggest]',
exportAs: 'prefixSuggest',
host: {
'class': 'prefix-field-suggest__container'
}
})
export class PrefixFieldSuggestDirective implements AfterViewInit {
private componentReference: ComponentRef<PrefixFieldSuggestComponent>;
#Input() fieldTextRef: ElementRef;
#Input() list: Array<PrefixSuggestLineInterface>;
#ViewChild('fieldTextRef', {read: ViewContainerRef}) fieldTextContainer;
constructor(private _injector: Injector, private resolver: ComponentFactoryResolver) {
this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
}
ngAfterViewInit(): void {
const prefixFieldSuggestFactory = this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
this.componentReference = prefixFieldSuggestFactory.create(this._injector);
this.componentReference.instance.list = this.list;
this.fieldTextContainer.insert(this.componentReference.hostView);
}
}
And my component looks like this :
#Component({
selector: 'prefix-field-suggest',
templateUrl: './prefix-field-suggest.component.html',
styleUrls: ['./prefix-field-suggest.component.scss']
})
export class PrefixFieldSuggestComponent {
/** Item list to display */
#Input() list: Array<PrefixSuggestLineInterface>;
/** Search string typed in search input */
#Input() searchTerm: string;
/** Input ID to align itself beneath */
#Input() inputId: string;
/** Offset between the suggest and the input; default 0 */
#Input() offset: number = 0;
/** Event when an item is selected */
#Output() itemSelected: EventEmitter<any>;
}
The template file for the PrefixFieldSuggestComponent :
<div class="prefix-field-suggest"
[ngStyle]="{ 'top': offset + 'px'}">
<span *ngFor="let item of list">
{{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
</span>
</div>
the PrefixSuggestLineInterface is just a contract interface so that different people in my team can implement their own suggestion lines, depending on the information they want to display into it. ATM it's basically 2 string fields.
Question :
I would like to access to the ViewContainerRef of the prefix-field-ext (searchbar) component, from my directive. I tried many things like #[fieldTextRef], #[fieldTextRef]="mysearchbar", fieldTextRef, etc ....
I tried these possibilities on this simple page :
<div class="prefix-search-group">
<prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
</div>
But in every cases, my fieldTextRef Input is always null. (Because it's not a child element). Is it even possible to do what I'm trying to do ?
Thanks a lot for your enlightning.
If you want to get ViewContainerRef for <prefix-field-text prefixSuggest just inject it in constructor prefixSuggest directive because it is applied on the same element:
export class PrefixFieldSuggestDirective implements AfterViewInit {
constructor(private fieldTextContainer: ViewContainerRef,...) {}
I'm Learning Angular2 so be gentle... I have a basic Component which has a string array. I want to pass an integer to this component and have it return the string found at the index of that parameter.
E.g. myComponent[number]=1 returns string "second element".
My code so far is this:
import { Component } from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`,
inputs:['number']
})
export class MyComponent {
myStringArray: string[];
returnedString: string;
constructor(){
this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
this.returnedString = 'number'+this.myStringArray['number'.valueOf()];
}
}
I am calling this component as follows
<myComponent [number]=1></myComponent>
I print the value returned to the screen and get 'undefined'.
Any ideas folks?
Since you want to bind to a custom property import Input and OnChanges from core and then implement as Input to create your custom property. The OnChanges just ensures your value gets updated when the bound value changes.
Remove the inputs key from your component decorator
import { Component, Input, OnChanges } from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`
})
export class MyComponent implements OnChanges {
myStringArray: string[];
returnedString: string;
#Input() inputNumber: number;
constructor(){
this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
}
ngOnChanges() {
this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
}
}
Update your code usage to the following
<myComponent [inputNumber]="1"></myComponent>
Here is a sample plunker.
https://plnkr.co/edit/S074zoVJ3ktQDKkcQgxe?p=preview
I had tough time to send string inputs. here is the correct way,
<myComponent [stringvar]="'string value'"></myComponent>
"string value" will not work. angular expecting object or number inside double quotes. string should be inside single quotes within double quotes "'string'"
You need to create a number variable in your component too that will hold the value.
import {Component, OnInit} from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`,
inputs:['myNum']
})
export class MyComponent implements OnInit {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
returnedString: string;
public myNum: number; <= here is your variable
ngOnInit() {
//you can use this.myNum anywhere now like this
this.returnedString = 'number '+ this.myStringArray[this.myNum];
}
constructor(){
}
}
You may have to change the name of your input because number is a keyword.
Another Note: You have to use OnInit instead of constructor to start using your inputs. ngOnInit is an Angular2 lifecycle method that is called by Angular when it's done building the component and evaluated the bindings
Here is another alternative. It demonstrates how to use a getter for returnedString. Less code needed than with ngOnChanges.
import { Component, Input } from '#angular/core';
#Component({
selector: 'my-cmp',
template: `
<p>returnedString = {{ returnedString }}</p>
`
})
export class MyComponent {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
#Input() stringIndex: number;
get returnedString(): string {
if (this.stringIndex !== undefined) {
return this.myStringArray[this.stringIndex];
}
}
}
It's quite simple. See this demo. Let's say you have two components parent and child. And you want to pass a variable to child and modify it there, say views.
On parent template:
<child [(views)]="views"></child>
On child component:
#Input() views: number;
#Output() viewsChange = new EventEmitter<number>();
// Bind this function to button click or some events:
updateViews() {
this.views++;
this.viewsChange.emit(this.views); // Emit the value to parent:
}
Detail explanation:
When you bind [(views)] in parent, it is acting as:
<child
[views]="views"
(viewsChange)="views = $event">
</child>
So, it is listening to viewsChange output function. Whenever, you do viewsChange.emit, the parent views get updated.
Gotcha: The output function should be precisely named $var + "Change". If you chose to name something else you will have to do:
<child
[views]="views"
(customEmitterFunction)="views = $event">
</child>
In order to pass data from the child component to the father component you shuold set an Output parameter, to trigger the signal your component should implements the OnChanges interface, your component should be like this
import { Component, Input,Output,EventEmitter,OnChanges,SimpleChanges } from '#angular/core';
#Component({
selector: 'my-cmp',
template: `
<p>returnedString = {{ returnedString }}</p>
`
})
export class MyComponent implements OnChanges {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
#Input() stringIndex: number;
#Output() cardinalNumber:EventEmitter<string> = new EventEmitter<string>();// you define an Output, this will emit a signal that will received from the father Component
ngOnChanges(changes:SimpleChanges) {
// when the input changes we emit a signal
this.cardinalNumber.emit(this.myStringArray[this.stringIndex]);
}
get returnedString(): string {
if (this.stringIndex !== undefined) {
return this.myStringArray[this.stringIndex];
}
}
}
then in the template of the father component you should insert :
<my-cmp [stringIndex]=the parameter in father Component's controller
(cardinalNumber)="method2beinvoked($event)">
</my-cmp>
method2beInvoked is the method in the father component that handles the message;
or you could do like this:
<my-cmp [stringIndex]=the parameter in father Component's controller
(cardinalNumber)="parameter=$event")>
</my-cmp
where parameter is a parameter in the father's component controller