Angular - Different CSS style sheets for the same component

Navigation
0

I have a section that is repeated in several components and CSS styles are the same for all of them. To make the code cleaner, I have removed the repeated styles from each of the CSS style sheets of the components and put everything in the style sheet of the parent component. However, when I do not recognize them ... Will it be that I forgot to link a file? I'm new to Angular.

For example, I have the following components: 

<app-root>
    <componente-hijo1>...</componente-hijo1>
    <componente-hijo2>...</componente-hijo2>
    <componente-hijo3>...</componente-hijo3>
</app-root>

In each child component I have, for example, the class ".test" with a series of associated CSS attributes. 

.prueba {
    background-color: red;
    color: blue;
    ...
}

What I want is not to repeat code and instead of having that class in each stylesheet of the children components, I have it only once in the parent's. Is that possible?

    
asked by spm.1989 29.12.2017 в 20:53
source

2 answers

1

Responding to your question , you can use the same style file for several components. This is what you usually use to define color palette, generic classes, animations and / or @keyframes .

Examples:

You can do it in different ways, one would be the following:

component.ts 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

As you can see, you import a .scss to your component, which has one or more, @import of other style sheets.

component.scss 

@import '../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css';
@import '../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css';
@import '../assets/plugins/ionRangeSlider/css/ion.rangeSlider.css';
@import '../assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css';

As you can see I do import of several different style sheets, as an example, here you will have to import your generic style sheet for that component.

Another possible solution is the following, import several sheets of css, directly in component.ts 

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls:  ['style1.css', 'style2.css']
    })

I would recommend less this last form, since it may be clearer to do @import within .sccs and is what is usually recommended to inherit color palette, etc.

    
answered by 30.12.2017 / 15:03
source
0

Yes, the best case would be to create a CSS file wherever you want and instead of using none or that of each component for your child components, use that file simply by pointing to the path of this new file in each child component. Remember, that a component can have all the CSS / SCSS files what you want.

The inheritance in Angular is possible, but the dependency injection is usually used and is more suited to the architecture of Angular.

    
answered by 30.12.2017 в 11:47
Get data between 2 laravel dates Generate event by clicking on a form vb.net