added some comments

src/app/components/partials/navbar/navbar.component.ts

@@ -7,7 +7,7 @@ import { User } from './../../../models/user.model';
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush,//this means it is not active checking for data changes
 })
 export class NavbarComponent implements OnInit {
   user:User ;
@@ -18,8 +18,10 @@ export class NavbarComponent implements OnInit {
     this.user = User.Auth();
 
     User.on('auth', (auth_state)=>{
-      console.log('the user has:', auth_state)
-      this.cd.markForCheck();//this updates the data on the component
+      console.log('the user has:', auth_state);
+
+      //we can dynamically make the view check on cvertain events. For large apps this is very efficient
+      this.cd.markForCheck();//this makes the view check for updates once
       this.user = User.Auth();
     });