I want to change one css property according to the condition but my code doesn't work.

      <form
    #deviceTypeForm
    id="device-types-form"
    
    [ngStyle]="{ 'grid-template-columns': this.router.url.includes('new') ? '60px 1fr 60px' : '1fr 1fr' }"
  >

earlier it was in css file :

    :host {
  display: grid;
  padding: variables.$spacing;
  grid-template-columns: 60px 1fr 60px;
  gap: variables.$spacing;
}

but now I want to make conditioning changing

CodePudding user response：

You applied the style to the :host selector, now you put it on the form selector.

A form has no display property, so id you try to add grid layout to the form, you first have to add a display: grid to it.

Also, the this.router can just be router.