Style Child Components from Parent - Angular

In this article, the author explores the topic of styling child components from the parent in Angular. By default, Angular restricts styles to each individual component, preventing inheritance from the parent component to its child. However, the author presents two methods to overcome this limitation.

The first method is to use ViewEncapsulation.None, which removes the encapsulation of the component's styles. This allows the parent component to apply styles directly to the child component. However, it's important to note that this approach can cause conflicts if other components in the application have the same class names.

The second method is to use the ::ng-deep selector, which allows styles to be applied to child components. However, similar to ViewEncapsulation.None, this approach also has the risk of affecting other components with the same class names.

To mitigate these risks, the author suggests using the :host selector, which scopes the style only to the respective component and its descendants. This ensures that the style remains contained and does not affect other components.

Overall, this article provides developers with insights into different strategies for styling child components from the parent in Angular. By understanding these methods, developers can make informed decisions when it comes to styling their Angular applications.

// Example usage of ViewEncapsulation.None
@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

// Example usage of ::ng-deep
@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent { }

// Example usage of :host
@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  host: {
    'class': 'app-component'
  }
})
export class AppComponent { }