Angular 4 and bootstrap - Adding container class to component selector

Question

I am currently adding bootstrap's container class to the component selector so all child elements react to bootsrap classes

for example in the index.html file i've applied

<app-root class="container"></app-root>

and in the bootstrapped app.component.html I've applied

<app-header class="row"></app-header>

Not sure if this is the recommended approach?

alehn96 · Accepted Answer · 2017-06-29 14:16:43Z

1

I recomend in app.component put the container class

<div class="container">

       <app-header></app-header>

</div>

and in the component app-header.component

<div class="row">
    ...
</div>

edited Jun 29, 2017 at 14:16

answered Jun 29, 2017 at 13:53

alehn96

1,4031 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gorea Iulian · Accepted Answer · 2017-07-19 12:48:19Z

-1

i am using angular4 Jquery plugin to add custom classes to components on creation with
jQuery('app-header').addClass('class1 class2 class3')

maybe you can use something like this in ngOnInit() or where it fits you best

Ex:

   import { Component, OnInit} from '@angular/core';
    @Component({
      selector: 'app-header',
      templateUrl: './app-component.html',
      styleUrls: ['./app-component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit(): void {
        jQuery('app-header').addClass('col-sm-6 example-class');
      }
    }

Then it should look something like this: <app-header class="col-sm-6 example-class"> ...

I do not know if this is the right way but it works for me for now

I hope it helps, Cheers

edited Jul 19, 2017 at 12:48

answered Jul 19, 2017 at 10:43

Gorea Iulian

12 bronze badges

2 Comments

succeed Over a year ago

Unless there is a need to programmatically add a class to the 'app-root' as you've demonstrated in ngOnInit would it not be simpler and convenient to add the classes ''col-sm-6 example-class' to the 'app-root' selector directly?

Gorea Iulian Over a year ago

i am using it like this for dynamically loaded components, i did not find another way for doing this so bootstrap will recognize cards added as angular modules for example(p.s.: i am using app-root selector in the example just to fit his case better)

Collectives™ on Stack Overflow

Angular 4 and bootstrap - Adding container class to component selector

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related