unable to remove empty tag using angular 6

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

Here I am having a issue below is my json data

 data = {

  "required": false,

  "name": "data",

  "details": [

    {

      "name": "type",

      "details": {

        "visible": false,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible":true,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible": false,



      }

    },



    {

      "name": "Modification",

      "details": {



        "visible": true,



      }

    }



  ]

}

.html code

<ng-container *ngFor="let x of data.details">

  <ul>

  <li *ngIf="x.details.visible">             

      {{x.name}}

  </li>

  </ul>

</ng-container>

The issue here is even though I condition is true here it is creating empty tags by this my html style is getting disturbed and getting unwanted spaces

in the console it showed me like this

<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Creation </li></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Modification</li></ul>

How can I remove that empty spaces.

Below is my stack blitz URL.

https://stackblitz.com/edit/angular-yw2zy5

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

1

Move the *ngIf to the ul tag.

– rrd
Nov 23 '18 at 8:17

use the ngIf condition in your ul. BTW you want so many uls? or one ul and many lis?

– xyz
Nov 23 '18 at 8:17

@AshishRanjan the uls & lis are generated depending on my data if the visible is false it shouldnt display but here if it is false then it is displaying empty tags

– techie
Nov 23 '18 at 8:23

@techie look at this post Delete comments of DOM for *ngFor and *ngIf in Angular

– Sanoj_V
Nov 23 '18 at 8:24

add a comment |

Here I am having a issue below is my json data

 data = {

  "required": false,

  "name": "data",

  "details": [

    {

      "name": "type",

      "details": {

        "visible": false,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible":true,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible": false,



      }

    },



    {

      "name": "Modification",

      "details": {



        "visible": true,



      }

    }



  ]

}

.html code

<ng-container *ngFor="let x of data.details">

  <ul>

  <li *ngIf="x.details.visible">             

      {{x.name}}

  </li>

  </ul>

</ng-container>

The issue here is even though I condition is true here it is creating empty tags by this my html style is getting disturbed and getting unwanted spaces

in the console it showed me like this

<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Creation </li></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Modification</li></ul>

How can I remove that empty spaces.

Below is my stack blitz URL.

https://stackblitz.com/edit/angular-yw2zy5

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

1

Move the *ngIf to the ul tag.

– rrd
Nov 23 '18 at 8:17

use the ngIf condition in your ul. BTW you want so many uls? or one ul and many lis?

– xyz
Nov 23 '18 at 8:17

@AshishRanjan the uls & lis are generated depending on my data if the visible is false it shouldnt display but here if it is false then it is displaying empty tags

– techie
Nov 23 '18 at 8:23

@techie look at this post Delete comments of DOM for *ngFor and *ngIf in Angular

– Sanoj_V
Nov 23 '18 at 8:24

add a comment |

Here I am having a issue below is my json data

 data = {

  "required": false,

  "name": "data",

  "details": [

    {

      "name": "type",

      "details": {

        "visible": false,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible":true,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible": false,



      }

    },



    {

      "name": "Modification",

      "details": {



        "visible": true,



      }

    }



  ]

}

.html code

<ng-container *ngFor="let x of data.details">

  <ul>

  <li *ngIf="x.details.visible">             

      {{x.name}}

  </li>

  </ul>

</ng-container>

The issue here is even though I condition is true here it is creating empty tags by this my html style is getting disturbed and getting unwanted spaces

in the console it showed me like this

<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Creation </li></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Modification</li></ul>

How can I remove that empty spaces.

Below is my stack blitz URL.

https://stackblitz.com/edit/angular-yw2zy5

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

Here I am having a issue below is my json data

 data = {

  "required": false,

  "name": "data",

  "details": [

    {

      "name": "type",

      "details": {

        "visible": false,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible":true,



      }

    },

    {

      "name": "Creation",

      "details": {



        "visible": false,



      }

    },



    {

      "name": "Modification",

      "details": {



        "visible": true,



      }

    }



  ]

}

.html code

<ng-container *ngFor="let x of data.details">

  <ul>

  <li *ngIf="x.details.visible">             

      {{x.name}}

  </li>

  </ul>

</ng-container>

The issue here is even though I condition is true here it is creating empty tags by this my html style is getting disturbed and getting unwanted spaces

in the console it showed me like this

<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Creation </li></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "false"

}--></ul>



<ul _ngcontent-c76=""><!--bindings={

  "ng-reflect-ng-if": "true"

}--><li _ngcontent-c76=""> Modification</li></ul>

How can I remove that empty spaces.

Below is my stack blitz URL.

https://stackblitz.com/edit/angular-yw2zy5

javascript angular typescript

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

edited Nov 23 '18 at 8:43

asked Nov 23 '18 at 8:14

techie

188

asked Nov 23 '18 at 8:14

techie

188

asked Nov 23 '18 at 8:14

techie

188

1

Move the *ngIf to the ul tag.

– rrd
Nov 23 '18 at 8:17

use the ngIf condition in your ul. BTW you want so many uls? or one ul and many lis?

– xyz
Nov 23 '18 at 8:17

@AshishRanjan the uls & lis are generated depending on my data if the visible is false it shouldnt display but here if it is false then it is displaying empty tags

– techie
Nov 23 '18 at 8:23

@techie look at this post Delete comments of DOM for *ngFor and *ngIf in Angular

– Sanoj_V
Nov 23 '18 at 8:24

add a comment |

1

Move the *ngIf to the ul tag.

– rrd
Nov 23 '18 at 8:17

use the ngIf condition in your ul. BTW you want so many uls? or one ul and many lis?

– xyz
Nov 23 '18 at 8:17

@AshishRanjan the uls & lis are generated depending on my data if the visible is false it shouldnt display but here if it is false then it is displaying empty tags

– techie
Nov 23 '18 at 8:23

@techie look at this post Delete comments of DOM for *ngFor and *ngIf in Angular

– Sanoj_V
Nov 23 '18 at 8:24

Move the *ngIf to the ul tag.

– rrd
Nov 23 '18 at 8:17

use the ngIf condition in your ul. BTW you want so many uls? or one ul and many lis?

– xyz
Nov 23 '18 at 8:17

@AshishRanjan the uls & lis are generated depending on my data if the visible is false it shouldnt display but here if it is false then it is displaying empty tags

– techie
Nov 23 '18 at 8:23

@techie look at this post Delete comments of DOM for *ngFor and *ngIf in Angular

– Sanoj_V
Nov 23 '18 at 8:24

add a comment |

2 Answers
2

active

oldest

votes

You should change your template to following

<ul>

  <ng-container *ngFor="let x of data.details">

    <li *ngIf="x.details.visible">

      {{x.name}}

    </li>

  </ng-container>

</ul>

You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

add a comment |

Issues with your implementation:

You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.

You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.

Give this a try:

<hello name="{{ name }}"></hello>

<ul>

    <ng-container *ngFor="let x of data.details">

        <li *ngIf="x.details.visible">

            {{x.name}}

        </li>

    </ng-container>

</ul>

Here's a Sample StackBlitz for your ref.

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442847%2funable-to-remove-empty-tag-using-angular-6%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You should change your template to following

<ul>

  <ng-container *ngFor="let x of data.details">

    <li *ngIf="x.details.visible">

      {{x.name}}

    </li>

  </ng-container>

</ul>

You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

add a comment |

You should change your template to following

<ul>

  <ng-container *ngFor="let x of data.details">

    <li *ngIf="x.details.visible">

      {{x.name}}

    </li>

  </ng-container>

</ul>

You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

add a comment |

You should change your template to following

<ul>

  <ng-container *ngFor="let x of data.details">

    <li *ngIf="x.details.visible">

      {{x.name}}

    </li>

  </ng-container>

</ul>

You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

You should change your template to following

<ul>

  <ng-container *ngFor="let x of data.details">

    <li *ngIf="x.details.visible">

      {{x.name}}

    </li>

  </ng-container>

</ul>

You would not want to have bunch of ul with single li elements. What the code above will do is to create a single ul and add some li elements within if x.details.visible condition is met

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

answered Nov 23 '18 at 8:23

Bunyamin Coskuner

4,17011136

add a comment |

Issues with your implementation:

You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.

You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.

Give this a try:

<hello name="{{ name }}"></hello>

<ul>

    <ng-container *ngFor="let x of data.details">

        <li *ngIf="x.details.visible">

            {{x.name}}

        </li>

    </ng-container>

</ul>

Here's a Sample StackBlitz for your ref.

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

add a comment |

Issues with your implementation:

You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.

You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.

Give this a try:

<hello name="{{ name }}"></hello>

<ul>

    <ng-container *ngFor="let x of data.details">

        <li *ngIf="x.details.visible">

            {{x.name}}

        </li>

    </ng-container>

</ul>

Here's a Sample StackBlitz for your ref.

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

add a comment |

Issues with your implementation:

You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.

You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.

Give this a try:

<hello name="{{ name }}"></hello>

<ul>

    <ng-container *ngFor="let x of data.details">

        <li *ngIf="x.details.visible">

            {{x.name}}

        </li>

    </ng-container>

</ul>

Here's a Sample StackBlitz for your ref.

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

Issues with your implementation:

You have *ngFor on the ul instead of the li. That is making the ul getting repeated on the DOM and thus breaking your style.

You should be using the ng-container as a parent of the li instead of using it as a parent to the ul. That way, you will be able to add the *ngIf condition on the li while using *ngFor on the ng-container.

Give this a try:

<hello name="{{ name }}"></hello>

<ul>

    <ng-container *ngFor="let x of data.details">

        <li *ngIf="x.details.visible">

            {{x.name}}

        </li>

    </ng-container>

</ul>

Here's a Sample StackBlitz for your ref.

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

answered Nov 23 '18 at 8:21

SiddAjmera

16.3k31240

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky