Code Refactoring for Dynamic List in Angular 8 With a specific requirement of showing/hiding the pages, the following implementation has been carried out.

The pages which needs to be hidden will be provided through an array 

this.unshowPages = ['menuPage', 'aboutusPage','linkedInPage'];


The corresponding HTML file,

 &lt;ng-container *ngIf="showaboutPages"&gt;
        &lt;li&gt;
          &lt;a  routerLink="#" routerLinkActive="active"&gt;           
            About us Page
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ng-container&gt;
       &lt;ng-container *ngIf="showlkdPages"&gt;
        &lt;li&gt;
          &lt;a  routerLink="#" routerLinkActive="active"&gt;           
            LinkedIN Page
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ng-container&gt;


The ts file will be 

unshowPages= [];

showMenuPages: boolean = true;
showaboutPages: boolean = true;
showlkdPages: boolean = true;

ngOnInit() {
//this.unshowPages = ['menuPage', 'aboutusPage','linkedInPage'];
this.unshowPages = ['menuPage'];

this.unshowPages.forEach((x:string)=&gt; {

  console.log(x)

  switch(x){
    case 'menuPage': this.showMenuPages = false; break;
    case 'aboutusPage': this.showaboutPages = false; break;
    case 'linkedInPage': this.showlkdPages = false; break;

  }

  });


The problem comes here is when pages gets updated, the switch case should be modified to adapt new pages. Is there any optimized way to achieve this.

The minimal reproducible working code : https://stackblitz.com/edit/angular-ivy-1antde
To handle such dynamic cases, you need to have dynamic code in both ts and html side.Take a look at this demo code which can be refactored furthur.

Here we have changed HTML 

    &lt;ul&gt;
        &lt;ng-container *ngFor="let page of pages"&gt;
            &lt;li *ngIf="page.showDOM"&gt;
                &lt;a routerLink="page.routing" routerLinkActive="active"&gt;
                    {{page.title}}
                &lt;/a&gt;
            &lt;/li&gt;
        &lt;/ng-container&gt;
    &lt;/ul&gt;


and similarly we created a dynamic array 

pages = [
  {
    id: 'menuPage',
    routing: '#',
    title: 'Menu Pages',
    showDOM: true
  },
  {
    id: 'aboutusPage',
    routing: '#',
    title: 'About US Pages',
    showDOM: true
  },
  {
    id: 'linkedInPage',
    routing: '#',
    title: 'LinkedIn Pages',
    showDOM: true
  }
]


It's still in a very crude format because your case will surely require more things from it. But this would help you to get the idea on how you should proceed.