CODEWITHSUNDEEP
angular
Okan Aslankan
Okan Aslankan

Reputation: 3116

Angular (ngClick) method not working in child component

I have child component in ngFor statement. FirstLoginComponent is the parent component. Which holds groups.

export class FirstLoginComponent implements OnInit, OnDestroy {

isLoading: boolean;
Groups: Group[];

constructor(
    public oidcSecurityService: OidcSecurityService,
    private router: Router,
    private firstLoginService: FirstLoginService
) {

}

ngOnInit(): void {
    this.getData();  
    console.log(this.isLoading);
}

ngOnDestroy(): void {
    console.log("FirstLogin Destroyed");
}
//...

private getData() {
    this.firstLoginService.GetIndex()
        .subscribe(data => this.Groups = data.Groups,
        error => this.oidcSecurityService.handleError(error),
        () => console.log(this.Groups));        
}}

I have a child component called GroupComponent 

export class GroupComponent implements OnInit, OnDestroy {
@Input() group: Group;  
isLoading: boolean;

constructor(public groupService: GroupService) {        
}

ngOnInit(): void {

}    
public joinGroup() : void {
    console.log("dd");   
    this.groupService.joinGroup(this.group.id);
}

ngOnDestroy(): void {
    console.log(this.group);
}
//...
public getGroup() {
    return this.group;
}
public leaveGroup(): void {
    console.log("dd");
    this.groupService.leaveGroup(this.group.id);

}}

My FirstLoginComponent template is 

<ul>
<li *ngFor="let group of Groups; let i = index">
    <group-partial [group] ="group"></group-partial>
</li>

and my GroupComponent Template is 

<div>
<img [src]="group.imageUrl" />
<h3>{{group.Name}}</h3>
<h5>{{group.Id}}</h5>
<button *ngIf="!group.isFollowing" id="#joinButton" (onClick)="joinGroup()">Join</button>
<button *ngIf="group.isFollowing" id="#leaveButton"  (onClick)="leaveGroup()">LEleave</button>

I can get the data from API as Observable(any) datatype. Groups displaying properly but, when I click the 'Join' button nothing happens. I can not even log into console.

Upvotes: 2

Views: 8181

Answers (1)

Elias Soares
Elias Soares

Reputation: 10254

According to your code, you are using (onClick), the correct is to use (click)

This can be seen in the official documentation found here: https://angular.io/guide/user-input

Upvotes: 4

Related Questions