Whenever the button in the product-list.component.html component is clicked:
<button type="button" (click)='addProduct("add")' >Add </button>The addProduct method is used in the product-list.component.ts component
@Component({
selector: "app-product-list",
templateUrl: "./product-list.component.html",
styleUrls: ["./product-list.component.css"]
})
export class ProductListComponent implements OnInit {
@Output() emitProductList: EventEmitter<string> = new EventEmitter<string>();
constructor() {}
ngOnInit() {}
addProduct(name: string) {
this.emitProductList.emit("add");
console.log("add"); // this line is displayed
}
}
Although the method is executed, it does not navigate to the product.component.html. The product.component.html component remains hidden.
Here's a snippet of the code from product.component.html:
<nav>
<a (click)='goTo("list")' >List</a>
<a (click)='goTo("add")' >Add</a>
</nav>
<app-product-list [hidden]='!hideList'></app-product-list>
<app-add-product (emitProductList)='goToAdd($event)' [hidden]='!hideAdd'>
</app-add-product>
Despite invoking the goToAdd method, it fails to function as expected. Here is the relevant section from product.component.ts:
goToAdd(e:any){
if (e === 'list') {
this.hideList = true;
this.hideAdd = false;
}
if (e === 'add') {
console.log(' --- add'); // this line is not displayed
this.hideList = false;
this.hideAdd = true;
}
}
How can we ensure navigation from product-list.component.html to product.component.html?
Your assistance on this matter would be greatly appreciated.