CODEWITHSUNDEEP
javascripthtmlangularangular6
Jeff Goes
Jeff Goes

Reputation: 555

Using *ngIf to change only the div surrounding the same content

I am trying to create a different div that surrounds always the same content. However, I cant create duplicated content since there is an input inside the div and it throws an error saying "this id is already in use"

I tried doing this:

<div *ngIf="true" x="" y="" ngClass=[example]>
    <input id="{{ aux }}"/>
</div>

and then creating another div for the other case:

<div *ngIf="false" ngClass=[example]>
    <input id="{{ aux }}"/>
</div>

So what I am trying to accomplish is:

as I showed before, I have a div that takes a variable (true or false) and depending on it it will have different directives, represented by x, y below.

<div ngIf="true" x="" y="" ngClass=[example]>
    //same content
</div>
<div ngIf="false" ngClass=[example]>
    //same content
</div>

I wanted to be able to create a dynamic conditional to apply only for the surrounding div wrapper adding the directives (its the only thing that changes) instead of duplicating content and throwing this error at me

the error Im getting is: the id is already in use.

can anyone help me?

Upvotes: 0

Views: 2476

Answers (2)

Matthew Thurston
Matthew Thurston

Reputation: 760

You can limit id reuse and prevent this error by using ngIfElse within another ng-template. An example from angular.io documentation:

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Specific to your use case the code would be:

<div ngIf="true; else falseTemplate" x="" y="" ngClass=[example]>
    //same content
</div>
<ng-template #falseTemplate>
    <div ngClass=[example]>
    //same content
    </div>
</div>

However, upon closer inspection it seems that you wish to only provide attribute values for x and y when your condition is true. You may simplify your code by binding a null value when false to the target attribute. The example below uses a ternary operator, but you could clean this code up even further by moving each attribute's respective ternary operation into a component side method (eg: getXValue() : number | null). 

<div [attr.x]="true ? '' : null" [attr.y]="true ? '': null" ngClass=[example]>
    //same content
</div>

Upvotes: 1

h4ckthepl4net
h4ckthepl4net

Reputation: 681

Can you please post some of your html code and TS component code? I think that you cant change only wrapper, you can change whole div with its inside components.

And you have incorrect syntax in your html, cause you need to write ngClass like this:

<!--You need-->
<div *ngIf="false" [ngClass]="example (object, string or array from ts or statically defined in html)">
    <!--some code-->
</div>
<!--or-->
<div *ngIf="false" ngClass="example (string)">
    <!--some code-->
</div>
<!--or-->
<div *ngIf="false" class="{{example (object, string or array from ts or statically defined in html)}}">
    <!--some code-->
</div>
<!--You wrote-->
<div *ngIf="false" ngClass=[example] (incorrect syntax)>
    <!--some code-->
</div>

[Edit] I know that this must be a comment, but I have not enough reputation :)

Upvotes: 0

Related Questions