0

My goal is to change the layout of the grid on a certain button press. I've already got the method binding setup, but I'm not sure how to reference the :host styles. I could just wrap everything in a div and then reference that, but it feels sort of hack-y. How do I go about referencing the :host{} object?

component.ts, HTML and CSS:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  editHostStyles() {
    //How do I make the reference here?
  }
}
:host {
    display: grid;
    width: 100%;
    height: 100%;
    row-gap: 2px;
    column-gap: 2px;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-rows: 300px 1fr 1fr;
}
<button mat-raised-button class="primary-button" (click)="editHostStyles()">Update Style!</button>
Chris Phillips
  • 1,997
  • 2
  • 19
  • 34
  • Isn't ```viewContainerRef: ViewContainerRef``` you are looking for? – Drag13 Feb 03 '21 at 14:59
  • I dit not understand the question so I try as a comment : inject the `elementRef: ElementRef` in the constructor and get `this.elementRef.nativeElement` then do whatever you want to its style. – Arnaud Denoyelle Feb 03 '21 at 14:59
  • Also, this might help (use `@HostBinding`, this is cleaner imho): https://stackoverflow.com/questions/44122081/how-to-dynamically-change-css-in-host-in-angular-2 – Arnaud Denoyelle Feb 03 '21 at 15:02
  • You can use Renderer2 or a @HostBinding annotation to access or modify an element's style rather than using an ElementRef's native element. Modifying a nativeElement is not recommended https://angular.io/api/core/ElementRef#properties – Alex Feb 03 '21 at 15:03

0 Answers0