Ndtyjky

I have a component called list and it has fab-button with icon and tooltip-text it looks like this:

I thought of making it as generic component, so that i can re-use this component again.So I am reusing the listcomponent in another components called SCHOOL & COLLEGE like this:

I am re-using list component fine,but i want to change the fab-button's icon and the the tooltip text(i,e add-school) according the component in which it is present.

Means

1) If the list component is present in SCHOOL component the fab-button icon and tooltip-text should be different.

2) If the list component is present in COLLEGE component the fab-button icon and tooltip-text should be different.

How can i change icons and tooltip-text dynamically according to the component ?? I didn't found any resources for components reusability.

Here is the stackblitz DEMO.

As per your current requirement, you need to have 3 @input and 1 @Output

  @Input()

  public tooltip;  //<-- pass tooltip text



  @Input()

  public buttonType; //<-- pass button style class



  @Input()

  public contacts;  //<-- pass contact from the college or school



  @Input()

  public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.

Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz

You should use @Input for this.

In your list component TS file, add the input property:

 @Input()

 public tooltip;

In the template, use this value instead of the hardcoded value

<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>

Then, you can pass the value in, like so:

<app-list tooltip="Add School"></app-list>

Here is a Stackblitz demo

You can pass data to the list component as @Input() property - if its a tooltip you can just add as string and bind it in your html - if it icon you can send the icon directly

@Input() tooltips;

while passing from parent <app-list tooltips="Add School"></app-list>

<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>

Now the case you want to pass the icon - you can add using content projection

list.component.html

<div>

    <mat-selection-list  #contact>

        <mat-list-option *ngFor="let contact of contacts">

            <a mat-list-item><span>{{ contact }}</span> </a>

        </mat-list-option>

      </mat-selection-list>

      <ng-content></ng-content>

  </div>

Passing your icon when loading the component

<app-list>

   <button mat-fab color="primary" id="add-button" matTooltip="Add School"><i 

     class="material-icons" >person_add</i></button>

</app-list>

In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class names you can just pass the class name as another @Input() property to the child

Hope this helps you - Happy coding :)