Change Width of Layout in A Certain Component in Angular

Question

Is it possible that you change the width of your layout in a selected component only? I wanted to change the <div class="page home-page"> only in my login component? Only in login component and not on other components.

Answer 1

Directives can be the solution of your problem.

src/app/width.directive.ts

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

@Directive({ selector: '[width]' })
export class widthDirective {

    @Input()
    set width(width: number) {
      this.el.nativeElement.style.width = `${this._width}px`;
    }

    constructor(el: ElementRef) {}
}

Then in any component you can use :

<div class="page home-page" width [width]="500">

If you want make your directives accessible anywhere you can follow this answer.

Answer 2

All styles (except the main global stylesheet) in Angular 2/4 are encapsulated, so when you're including stylesheets like this:

@Component({
  selector: 'component-name',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})

All styles from component.css will be applied ONLY to component.html (if you doesn't use things like /deep/ and the same). So feel free to change the width of current layout, it will not affect other layouts!