How to pass arguments to other components while we reusing them in Angular 7

Question

I have three components namely, Dashboard,Widget and Workspace Components. I have reused widgets components in the other two. I have to display widgets component with orginal data from DB while reusing it from Dashboard Component, and I need to display dummy data while reusing it from Workspace Component. To achieve the above scenario I have assigned an boolean variable named dummyData and set it to false by default in my WidgetComponent.

public dummyData : boolean = false;

ngOnInit(){
  if(!this.dummyData){
    // orginal data
  }else{
    // dummy data
  }

Now, I need to pass an boolean argument while reusing this component somewhere else.

How do I pass the argument to the component while reusing it?

Answer 1

you can use Input() directive in your Widget component and pass the state into the component where ever you want to use it.

• Widget component

@Input() stateData: boolean;

• In your selector declaration

refer the component interaction part https://angular.io/guide/component-interaction

Answer 2

Use the input decorator on the property.

@Input()
dummyData = false;

and set it true with

<widget [dummyData]="true"></widget>