angularangular-ng-ifangular-ng-classangular-ng

Change Width of Layout in A Certain Component in Angular

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.

Solution

  • 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.