CODEWITHSUNDEEP
angulartypescript
Lavin Ghan
Lavin Ghan

Reputation: 21

How to Send data from Child Component to Parent Component in a ts file?

so I have the following, this is the child component, it has a formgroup that has input for check boxes that I want to get count of every time a user clicks the box, for that I have the following

@Input() numberTest: number;
@Output() getFinalCheckBox = new EventEmitter<number>();
ngDoCheck(): void{

    this.numberTest = selectedUsers.length;
    this.getFinalCheckBox.emit(this.numberTest);
}

now I want to be able to display that number I get from this function numberTest in a .ts file of the parent component, I see more examples of it being displayed in the html so I was confused, the parent component has this:

numbertest: any = 0;
steps: any2[] = [{label:"Select Items", nextLabel:`total item selected ${this.numbertest}`, backLabel:"Clear all"},

I want to be able to get that selected item total in numbertest from the child component, how can I achieve that?

I am new to angular so I don't know if there are any classes I'll have to extend or anything like that in the parent component

Upvotes: 0

Views: 529

Answers (1)

Benjamin Sicard
Benjamin Sicard

Reputation: 36

In child component it's ok

@Output() getFinalCheckBox = new EventEmitter<number>();
ngDoCheck(): void{
    this.numberTest = selectedUsers.length;
    this.getFinalCheckBox.emit(this.numberTest);
}

In parent component html :

<child-component (getFinalCheckBox)="getNumberTest($event)"></child-component>

In parent component ts :

public getNumberTest(value) {
 this.numbertest = value
}

Upvotes: 1

Related Questions