CODEWITHSUNDEEP
angular
auro
auro

Reputation: 27

click event from component to component

I want to pass the uuid from parent to child through child component click

App.component.ts

import { Component } from '@angular/core';
import { v4 as uuid } from 'uuid';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  { 

list: string[] = [];

gen() {
 this.list.push(uuid());
 }
}

Child.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-child',
templateUrl: './child.component.html'
})

export class ChildComponent  {
 @Input() lists;
 @Input() gens(){};
}

Child.component.html

<button (click)="gens()">Generate</button>
<table border='2'>
 <tr *ngFor="let id of lists"> 
  <td> {{ id }} </td> 
 </tr>
</table>

App.component.html

<my-child [lists]='list' [gens]='gen()'></my-child>

Upvotes: 0

Views: 100

Answers (1)

Seba Cherian
Seba Cherian

Reputation: 1793

Try this:

Child.component.html:

<button (click)="gens()">Generate</button>

Child.component.ts:

 @Input() getUuid: any;
  @Output() clickedValue = new EventEmitter(false);

    gens() {
      this.clickedValue .emit(true);
    }

App.component.html:

<my-child [lists]='list' (clickedValue)="onClickedValue($event)" [getUuid]="uuid" ></my-child>

App.component.ts:

uuid: any;
onClickedValue(event) {
  if(event) this.uuid = //write the code for assigning your uuid 
}

Upvotes: 1

Related Questions