title: How do square brackets determine the class in angular 2
body: <p>I was just going through an Angular 4.0 component online on the <a href="https://github.com/akveo/ngx-admin/blob/master/src/app/%40theme/components/header/header.component.html#L2" rel="nofollow noreferrer">ngx GitHub repo</a>, basically just the header component as can be seen below:</p>
  
  <pre><code>&lt;div class="header-container"
       [class.left]="position === 'normal'"
       [class.right]="position === 'inverse'"&gt;
    &lt;div class="logo-containter"&gt;
      &lt;a (click)="toggleSidebar()" href="#" class="navigation"&gt;&lt;i class="nb-menu"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;div class="logo" (click)="goToHome()"&gt;ngx-&lt;span&gt;admin&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;ngx-theme-switcher&gt;&lt;/ngx-theme-switcher&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The thing is i am not quite able to understand the way the <code>class</code> code works , i see the below code and am not quite able to understand it:</p>
  
  <pre><code>[class.left]="position === 'normal'"
  [class.right]="position === 'inverse'"
  </code></pre>
  
  <p>What exactly does the code above really do ?</p>
  
  <p>The typescript file for the header component looks like so:</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  
  import { NbMenuService, NbSidebarService } from '@nebular/theme';
  import { UserService } from '../../../@core/data/users.service';
  import { AnalyticsService } from '../../../@core/utils/analytics.service';
  
  @Component({
    selector: 'ngx-header',
    styleUrls: ['./header.component.scss'],
    templateUrl: './header.component.html',
  })
  export class HeaderComponent implements OnInit {
  
  
    @Input() position = 'normal';
  
    user: any;
  
    userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
  
    constructor(private sidebarService: NbSidebarService,
                private menuService: NbMenuService,
                private userService: UserService,
                private analyticsService: AnalyticsService) {
    }
  
    ngOnInit() {
      this.userService.getUsers()
        .subscribe((users: any) =&gt; this.user = users.nick);
    }
  
    toggleSidebar(): boolean {
      this.sidebarService.toggle(true, 'menu-sidebar');
      return false;
    }
  
    toggleSettings(): boolean {
      this.sidebarService.toggle(false, 'settings-sidebar');
      return false;
    }
  
    goToHome() {
      this.menuService.navigateHome();
    }
  
    startSearch() {
      this.analyticsService.trackEvent('startSearch');
    }
  }
  </code></pre>