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

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:

<div class="row">
  <div class="col-xxl-5">
    <div class="row">
      <div class="col-md-12">
        <nb-card>
          <nb-card-header>Default Inputs</nb-card-header>
          <nb-card-body>
        <lib-input-with-lable></lib-input-with-lable> <- this is the lib I creared
          </nb-card-body>
        </nb-card>
      </div>
    </div>
  </div>

Lib component:

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

@Component({
  selector: 'lib-input-with-lable',
  template: `
    <div class="d-flex flex-row">
      {{title}}
      <input style="margin-left: 2rem"/>
    </div>
  `,
  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:

<input type="password" nbInput fullWidth placeholder="Password">

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 

 <lib-input-with-lable --passing here the styles--->

and inside

to use is like this:

@Component({
      selector: 'lib-input-with-lable',
      template: `
        <div class="d-flex flex-row">
          {{title}}
          <input ------using here the style------- style="margin-left: 2rem"/>
        </div>
      `,
      styleUrls: ['./input-with-lable.component.scss'],
    })
cssangular


Solution 1:[1]

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

.test{
  //write your css wants
}

then send input to 

<lib-input-with-lable style={{style}}></lib-input-with-lable>

in child component

@Input() style: string;

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

Solution 2:[2]

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

<child-component [myStyle]="styleObj"></child-component>

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

<span [style]="myStyle">The sample text</span>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kamran Taghaddos

Related Questions