How to call a div inside another component which is common in all pages only to a certain page and m-CodePudding

I have a common component that is common to all other components. Inside that I added a slider in that portion, which is applicable to only one component. So how can make that particular div inside a component invisible for all other components. When Iam setting isVisible as true in .ts file its visible in all other components also. How can I make it visible in only one page

<div  *ngIf="isVisible">
 <div ></div>
  <div >
   <mat-slide-toggle> New Toggle</mat-slide-toggle>
 </div>

CodePudding user response：

Option 1

Let isVisible be an input with a default value

@Input() isVisible = false

and then for that particular page set [isVisible]="true"

Option 2

Explore angular's content projection.

Adding <ng-content></ng-content> to the component template you can project content via

<my-component>
  ... etc
  <mat-slide-toggle> New Toggle</mat-slide-toggle>
</my-component>

CodePudding user response：

set an @input inside your .ts file and set it to false:

@Input() isVisible = false;

and only at this specific time give it a true value

<your-component [isVisible]="true"></your-component>

in the all the others you don't need to add it, because it's have is default value