title: angular 6 + show hide element with ngIf doesn't work
body: <p>I'm new to angular. I have the app.component.html like this:</p>
  
  <pre><code>&lt;app-login *ngIf="!loggedIn"&gt;&lt;/app-login&gt;
  &lt;section *ngIf="loggedIn" style="background:#EBF0F5;"&gt;
      &lt;div class="container"&gt;       
          &lt;div class="board"&gt;                    
              &lt;msw-navbar &gt;&lt;/msw-navbar&gt;      
              &lt;div class="tab-content"&gt;
                  &lt;!-- Nested view  --&gt;
                  &lt;ui-view&gt;&lt;/ui-view&gt;
              &lt;/div&gt;
              &lt;!-- End Content Area --&gt;
          &lt;/div&gt;
          &lt;pre&gt;{{ formData | json }}&lt;/pre&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I want to show the login page and hide after login without any control or something. 
  I have the login.ts </p>
  
  <pre><code>export class LoginComponent implements OnInit {
    logginIn: boolean = true;
  }
  </code></pre>
  
  <p>in login click:</p>
  
  <pre><code> login() {
      this.logginIn = true;
  }
  </code></pre>
  
  <p>in app.component.ts</p>
  
  <pre><code>    export class AppComponent implements OnInit {      
      @Input() formData;
      loggedIn: boolean = false;
  }
  </code></pre>
  
  <p>the login.html</p>
  
  <pre><code>  &lt;div class="content"&gt;
    &lt;form class="login-form"&gt;
        &lt;h3 class="form-title"&gt;Login to your account&lt;/h3&gt;
        &lt;div class="alert alert-danger display-hide" style="display: none;"&gt;
          &lt;button class="close" data-close="alert"&gt;&lt;/button&gt;
          &lt;span&gt; Enter any username and password. &lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-icon"&gt;
            &lt;i class="fa fa-user"&gt;&lt;/i&gt;
            &lt;input id="userName" name="userName" 
            class="form-control" required
            [(ngModel)]="user.userName"
            autofocus="autofocus" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-icon"&gt;
            &lt;i class="fa fa-lock"&gt;&lt;/i&gt;
            &lt;input id="password" name="password" 
            class="form-control" required 
            [(ngModel)]="user.password"
            type="password"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;div class="alert alert-danger" 
              *ngIf="securityObject &amp;&amp;
                     !securityObject.isAuthenticated"&gt;
                &lt;p&gt;Invalid User Name/Password.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;br&gt;
        &lt;div class="text-right"&gt;
            &lt;button class="btn-lg btn pull-right btnCol" (click)="login()"&gt;
                Login
              &lt;/button&gt;  
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>What should I add in app.component to get the value from login component true or false? how the component communicate with each other? Thank you </p>