CODEWITHSUNDEEP
angulartypescript
609tom
609tom

Reputation: 299

How to use the 'click' method to go to the parent component

When I click the button in the component product-list.component.html:

<button type="button" (click)='addProduct("add")' >Add </button>

I use the method addProduct in the component product-list.component.ts

@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
  }
}

The method is invoked but does not go to the component product.component.html The product.component.html component is not displayed.

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>

This method goToAdd does not work (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 to go to product.component.html from the product-list.component.html component?

Thank you very much for help

Upvotes: 0

Views: 48

Answers (1)

Pujan Shah
Pujan Shah

Reputation: 835

I think emitProductList is given to wrong selector.

Check below part once

<nav>
    <a  (click)='goTo("list")' >List</a> 
    <a  (click)='goTo("add")' >Add</a>
</nav>
<app-product-list (emitProductList)='goToAdd($event)' [hidden]='!hideList'></app-product-list>

<app-add-product  [hidden]='!hideAdd'></app-add-product>

Upvotes: 1

Related Questions