title: Dynamically hiding children using ng-content in angular 7
body: <p>There is a scenario in my project where the content has to be hidden based on role permission given for a specific user logged in.</p>
  
  <p>So we have made a global component named <code>&lt;app-authorise&gt;</code> where it will enable the children based on the permission that the user has.</p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
  import { GlobalService } from '../../../core/global/global.service';
  
  @Component({
    selector: 'app-authorise',
    templateUrl: './app-authorise.component.html',
    styleUrls: ['./app-authorise.component.scss'],
    changeDetection: ChangeDetectionStrategy.Default
  })
  export class AuthoriseComponent {
    @Input() public module: string;
    @Input() public permission: string;
    @Input() public field: string;
    @Input() public role: string;
  
    public currentUser: any = {};
    public currentUserRoles = [];
    constructor(private globalService: GlobalService) {
      this.globalService.subscribeToUserSource((updatedUser: any) =&gt; {
        this.currentUser = updatedUser;
        this.currentUserRoles = updatedUser.rolePermissions;
      });
    }
  
    get enable() {
      const {
        currentUser,
        currentUserRoles,
        module,
        permission,
        role
      } = this;
      if (currentUser &amp;&amp; currentUserRoles) {
        return role ? this.hasRole(currentUserRoles, role) :
        this.globalService.hasPermissionForModule({
          currentUserRoles,
          module,
          permission,
        });
      }
      return false;
    }
  
    public hasRole(currentUserRoles: any, role: string) {
      return Boolean(currentUserRoles[role]);
    }
  }
  </code></pre>
  
  <p><strong>Component.html</strong></p>
  
  <pre><code>&lt;ng-container&gt;
    &lt;ng-content *ngIf="enable"&gt;&lt;/ng-content&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p><strong>UseCase</strong></p>
  
  <pre><code>&lt;app-authorise [module]="properties.modules.project" [permission]="properties.permissions.CREATE"&gt;
    &lt;app-psm-list&gt;&lt;/app-psm-list&gt;
  &lt;/app-authorise&gt;
  </code></pre>
  
  <p>The actual problem we are facing is the child component's <strong>onInit()</strong> method is getting called even when the child is enabled inside the parent component.</p>
  
  <p>Any idea , advice on this will be highly helpfull.</p>