Conditional styling on host element

Question

I have a component that all it does is render , its something like this:

@Component({
     selector: \'my-comp\',
     host: ???,
     template: `
         

        

Answer 1

Not sure what you're trying to do but something like this should suffice where you use ngAfterViewInit and ElementRef:

import {AfterViewInit, ElementRef} from '@angular/core';

@Component({
   selector: 'my-comp',
   host: ???,
   template: `
     
   `
})

 export default class MyComp implements AfterViewInit {
   @Input() title: string;
   public isChanged: boolean;

   constructor(private _ref: ElementRef) {}

   ngAfterViewInit() {

     var host = this._ref.nativeElement;

     if (this.isChanged) {
        host.style.width = '200px';
     }
   }
 }

If you want to do some checking for isChanged every time it changes you could implement ngDoCheck instead/as well:

ngDoCheck() {

  if (this.isChanged !== this.previousIsChanged) {

    var host = this._ref.nativeElement;

    if (this.isChanged) {
      host.style.width = '200px';
    }
  }
}