Search code examples
javascriptangularcomponents

How to identify parent component of a component uniquely in Angular

I have a component called Com1 and I have import that component inside of several components. My Com1 component contain a button and when the button is clicked function triggered. Inside that function I want to print the parent component of my Com1 component instance. How can I do that. Image below describe the scenario.

enter image description here

This is my component.

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent implements OnInit {

  constructor(

  ) { }

  ngOnInit() {

  }

  onButtonClicked() {
    console.log("parent component");
  }

}

When the button clicked I want to print the parent component of my Com1 component as Com2, Com3 , Com4.

Solution

  • You can Pass the parent component name as input to your child component and use it there.

    @Input parentName:string;

    and in html

    [parentName]="com2"