CODEWITHSUNDEEP
angular
Crocsx
Crocsx

Reputation: 7620

styleUrls is not applied in angular

I have a component like this :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header-main',
  templateUrl: './header-main.component.html',
  styleUrls: ['header-main.component.less']
})
export class HeaderMainComponent implements OnInit {

  searchValue: string;

  constructor() { }

  ngOnInit() {
  }

}

In my template there is a div 

<mat-form-field class="header_search">

with in the less file

.header_search {
  margin-right: 5px;
  color: red;
}

but the style is not applied.... why ?

Upvotes: 1

Views: 286

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73741

In order to style the content of a child component, you can use the ::ng-deep shadow-piercing descendant combinator:

::ng-deep .mat-tab-label { 
  transform: skew(20deg);
  ...
}

See this stackblitz for a demo.

An alternative is to turn off the view encapsulation of the component:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

See this stackblitz for a demo.

Upvotes: 2

Related Questions