How to pass class style from parent to child in Angular, and using it in specific element

Question

so I'm using a template that I downloaded of ngx-admin.

I'm creating new lib of some simple components such as input with labels and etc. this lib component is style free, I would like to inject the ngx-admin styles to these components.

What shall be the best way to pass the syles and classes to the child lib components?

this is the template page.component.html which I'm using the new lib I created:


  
    
      
        
          Default Inputs
          
         <- this is the lib I creared

Lib component:

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

@Component({
  selector: 'lib-input-with-lable',
  template: `
    
      {{title}}
      
    
  `,
  styleUrls: ['./input-with-lable.component.scss'],
})
export class InputAndLableComponent implements OnInit {

  constructor() { }

  @Input() title: string;
  ngOnInit(): void {
  }

}

This is how the template is using the classes for css style:

So I would like to have the ability to use nbInput & full width, which I added to page.component.scss

and I will like to use is some kind of

and inside

to use is like this:

@Component({
      selector: 'lib-input-with-lable',
      template: `
        
          {{title}}
          
        
      `,
      styleUrls: ['./input-with-lable.component.scss'],
    })

user_2576254 · Answer

Demo create one css in input-with-lable.component.scss

.test{
  //write your css wants
}

then send input to

in child component

@Input() style: string;

then assign this attribute any element's class you want to effect css

user_6666348 · Answer

You can use typescript object to write your CSS style in your parent.component.ts file and pass it as an object variable to your child component.

You can follow these steps:

1- Create an object in the parent.component.ts and populate it with your desired CSS style properties

export class ParentComponent {
    styleObj = {
        'font-weight': 'bold',
        'font-size': '30px',
        'color': '#3f51b5'
    };
}

2- Pass this object to the child component in the parent.component.html file

3- Get this object in the child.component.ts file as input and use it in the child.component.html file

export class ChildComponent {
    @Input() myStyle: object;
}

4- Use the input object in the child.component.html file

The sample text

How to pass class style from parent to child in Angular, and using it in specific element

2 Answers