How to add the class to child component layout from parent component in Angular 12 and Typescript?

Question

I have included the child component in parent component, I have dashboard component as a child component and preview component as a parent component.

Parent(preview) component.html file

<app-dashboard [selectedItems]="menus" [filteredItems]="newuniq"></app-dashboard>

From parent component I am passing some data to child component using @Inpot decorator. What I need is, I have to add some css to that child component layout. I don't know how to do this.

Answer 1

If you want to style your child component's elements (eg. the h1 inside app-dashboard), you can try using ::ng-deep in the scss file of your parent component. However, this is deprecated but it's the easiest to use and it still works.

    ::ng-deep app-dashboard {
    // styles you want to apply app-dashboard's elements
      h1 {
        font-size: 36px;
      }
    }

If you want to style your child component only , you can just do normal scss in your parent scss:

    app-dashboard {
    // styles you want to apply to app-dashboard
    }

The correct way to pass styles is by changing the view encapsulation to none but this will make your styles for the component global. This may mean that other styles will start affecting your component's styles. You can check out the documentation here: View Encapsulation