#@Output() Error

14 messages · Page 1 of 1 (latest)

gray gorge
#

I am new to angular. I am using output to send data from child component to parent component. I had double checked the implementation and asked chat gpt for help but of no use. The Issue is when I click on button that triggers the event emitter sometimes I get the value but only for some clicks. And most of the time it doesn’t work. There is no error on console so I am unable to track the issue.

vernal zealot
#

can you paste your code please?

gray gorge
#

filter.component.ts

`import { Component, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.scss'],
})
export class FilterComponent {
categories = ['shoes', 'sports'];
@Output() showCategory = new EventEmitter<string>();

onShowCategory(category: string) {
this.showCategory.emit(category);
}
}`

#

filter.component.html

<mat-expansion-panel *ngIf="categories"> <mat-expansion-panel-header> <mat-panel-title>{{ 'Categories' | uppercase }}</mat-panel-title> </mat-expansion-panel-header> <mat-selection-list [multiple]="false"> <mat-list-option *ngFor="let category of categories" [value]="category"> <button (click)="onShowCategory(category)">{{category}}</button> </mat-list-option> </mat-selection-list> </mat-expansion-panel>

#

home.component.ts

`import { Component } from '@angular/core';

const ROWS_HEIGHT: {[id:number]:number} = {1: 400, 3: 335, 4: 350}

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {
cols: number = 3;
rowHeight = ROWS_HEIGHT[this.cols];
category!: string;
onColumnsCountChange(colsNum: number): void{
this.cols = colsNum;
this.rowHeight = ROWS_HEIGHT[this.cols];
}
displayCategory(newCategory: string): void{
this.category = newCategory;
console.log(this.category);
}
}`

#

home.component.html

<mat-drawer-container [autosize]="true" class="min-h-full max-w-full mx-auto border-x"> <mat-drawer mode="side" opened class="p-6"> <app-filter (showCategory)="displayCategory($event)"></app-filter> </mat-drawer> <mat-drawer-content class="p-6"> <app-products-header (columnsChangeCount)="onColumnsCountChange($event)"></app-products-header> <mat-grid-list gutterSize="16" [cols]="cols" [rowHeight]="rowHeight"> <mat-grid-tile> <app-product-box class="w-full" [fullWidthMode]="cols === 1"></app-product-box> </mat-grid-tile> <mat-grid-tile> <app-product-box class="w-full" [fullWidthMode]="cols === 1"></app-product-box> </mat-grid-tile> <mat-grid-tile> <app-product-box class="w-full" [fullWidthMode]="cols === 1"></app-product-box> </mat-grid-tile> <mat-grid-tile> <app-product-box class="w-full" [fullWidthMode]="cols === 1"></app-product-box> </mat-grid-tile><mat-grid-tile> <app-product-box class="w-full" [fullWidthMode]="cols === 1"></app-product-box> </mat-grid-tile> </mat-grid-list> </mat-drawer-content> </mat-drawer-container>

vernal zealot
#

can you add a console.log inside onShowCategory (filter.component) and see what values do you get?

gray gorge
#

Somtimes its showing value of category sometimes its is not working. That is confusing me.

#

Another thing i had noticed is that when I interact with other button that emits columnsCountChange it starts working for some clicks but only for sometimes

#

I had also used change detection but of no use

gray gorge
#

I also had commented other event emitter so that if there is any conflict i can found out that. But it worked same

gray gorge
white robin