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.


Directives can be the solution of your problem.


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

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

    set width(width: number) { = `${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.