1

So I have build a general button component in Angular:

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

@Component({
  selector: 'app-general-button',
  templateUrl: './general-button.component.html',
  styleUrls: ['./general-button.component.scss']
})
export class GeneralButtonComponent  {

  @Input() public buttonTitle: string;
  @Input() public disabledButton = false;
  @Input() public fullWidth = false;
  @Input() public tooltipMessage: string;
  @Output() public buttonClick =  new EventEmitter();

  constructor() {

  }

  public buttonClicked(): void {
    this.buttonClick.emit();
  }

}

And I also have a cancel button that extends from that component:

import { Component } from '@angular/core';
import { GeneralButtonComponent } from '../general-button/general-button.component';

@Component({
  selector: 'app-cancel-button',
  templateUrl: '../general-button/general-button.component.html',
  styleUrls: ['./cancel-button.component.scss']
})
export class CancelButtonComponent extends GeneralButtonComponent {

  constructor() {
    super();
  }

}

In my global styles I have a styled the general button component to be hidden when and visible when I hover on the row it's on:

nb-accordion app-general-button,
table app-general-button {
  visibility: hidden;
}

nb-accordion nb-accordion-item:hover app-general-button,
table tr:hover app-general-button {
  visibility: visible;
}

However this style does not seem to apply to the cancel button component. Is there a way to tell angular to apply the styles from a base component to all of the components that extend from it?

David Mathers
  • 163
  • 2
  • 7
  • Does this answer your question? [How to inherit css styles in child component from parent in Angular 5](https://stackoverflow.com/questions/49516005/how-to-inherit-css-styles-in-child-component-from-parent-in-angular-5) – Aakash Garg May 28 '20 at 13:47
  • https://stackoverflow.com/questions/49516005/how-to-inherit-css-styles-in-child-component-from-parent-in-angular-5/49516214 – Aakash Garg May 28 '20 at 13:47

1 Answers1

0

You might have to add the parent component's CSS file along with the styleUrls in the child component. Or would have to turn ViewEncapsulation to none (which is generally not suggested)

Gauri Kesava Kumar
  • 466
  • 2
  • 15