CODEWITHSUNDEEP
angularcomponents
Noura Ali
Noura Ali

Reputation: 73

view specific component in another component according to specific condition in angular

I have 5 components , I want to view one of them in another component according to specific condition for example when x=1 First Component is viewed ,x=2 Second Component is viewed and so on meaning of x is changeable

Upvotes: 0

Views: 429

Answers (2)

yazantahhan
yazantahhan

Reputation: 3110

You can use NgSwitch Directive for this

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

Alternatively, you can also use NgIf Directive, but the NgSwitch is more suitable for single expression for multiple choices.

<div *ngIf="condition">Content to render when condition is true.</div>

Upvotes: 1

jdgower
jdgower

Reputation: 1182

Where x is what you would like to test (from your example, x = 1)

<div [ngSwitch]="x">
  <some-element *ngSwitchCase="1">...</some-element>
  <some-other-element *ngSwitchCase="2">...</some-other-element>
  <some-other-element-2 *ngSwitchCase="3">...</some-other-element-2>
  <some-other-element-3 *ngSwitchDefault>No matches found</some-element-3>
</div>

Reference: https://angular.io/api/common/NgSwitch

Upvotes: 2

Related Questions