3

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.

P.S.
  • 15,970
  • 14
  • 62
  • 86
Joseph
  • 7,042
  • 23
  • 83
  • 181

2 Answers2

4

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.

panic
  • 2,004
  • 2
  • 17
  • 33
  • How can i do this. calc(100% - 200px)? – Joseph Sep 29 '17 at 08:29
  • You can move your `calc` function inside the `WidthDirective` and do something like `@Input() set width(width: number) { this.el.nativeElement.style.width = \`${this.calc(100% - width)}px\`; }` it depends `calc()` return value, can you show me the function ? – panic Sep 29 '17 at 08:34
1

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!

P.S.
  • 15,970
  • 14
  • 62
  • 86
  • However my div class="page home-page" is found on other component. How can you call the div class="page home-page" on the login component and set its width to what you want? – Joseph Sep 29 '17 at 07:15
  • @Joseph, if it's in another component, you can't get access to it from current `component.css` file. You can write global styles in `styles.css` file (it's somewhere near the root of the project). – P.S. Sep 29 '17 at 07:20
  • @Commerical Suicide. Yes, I applied the div class="page home-page" design on the styles.css and i want to change its width only on the login.component. Only on the login.component and not on other component – Joseph Sep 29 '17 at 07:23
  • @Joseph, just add new rule to `login.component.css` and this rule will be applied only for this layout. Or may be I don't fully understand your goal. – P.S. Sep 29 '17 at 07:28