Change Width of Layout in A Certain Component in Angular

Issue

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.

Answered By – panic

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.