How to apply CSS classes to another component in AngularDart?

You could achieve this by splitting your components code into separate files - or separate CSS file in your case.

Instead of writing the style straight in the component's - styles, you would import the CSS file by using the styleUrls. That way you can pass a file(s) with your styles, and the file can be shared amongst multiple components.

@Component(      styleUrls: ['./hero1.css', './folder/hero2.css'],)

Bear in mind that the URLs in styleUrls are relative to the component.

Another benefit of importing the css with styleUrls is that it also grants you the ability to use imports within that file.

hero1.css

@import './folder/hero2.css';

FYI: It's a common practice to split your components code into separate files.

• hero.dart
• hero.css
• hero.html

And then in your dart file reference them as:

@Component(      templateUrl: './hero.html',      styleUrls: ['./hero.css'],)

Please refer to AngularDart - Component Styles for brief information about this.

As your popup isn't a child of the component that opened it you cannot use ::ng-deep

the only thing I think that will work is to remove view encapsulation from the host, the popup and the component that opens the popup (try only the popup and component that opens the popup first, if that doesn't work, remove the host's encapsulation as well.)

@Component(  selector: 'happy-popup',  template: '''      <div class="header">This is the popup content.</div>      <div class="main">The value is {{value}}.</div>      <div class="footer">I am happy!</div>  ''',  encapsulation: ViewEncapsulation.None // <=== no encapsulation at all)class HappyPopupComponent implements HasValueSetter {

You can combine scss with your code

First you need to seperate the scss file you want to share accross the app

For example:

In style1.scss

.header { font-weight: bold }

Then in style2.scss

@import "style1"

Or you can combine list of scss file in your component code by define in the list of array

styleUrls: ['./style1.scss', './style2.scss'],

• Note: Please change the path acordingly with your file path and also this only work when you use scss not css

This is how you can manual config scss support for angular cli

In angular.json add

"projects": {        "app": {            "root": "",            "sourceRoot": "src",            "projectType": "application",            "prefix": "app",            "schematics": { // add this config                "@schematics/angular:component": {                    "style": "scss"                }            },