How do i load bootstrap in child component in angular?

Question

I have a component, dashboard and within that component I have generated another component,menu-bar (which has only the html of that side menu) that I intend to use in other components. If I call the menu bar like this:

<app-menu-bar> </ app-menu-bar>

The bootstrap does not load for this component that was called, but for the rest of the page it loads normally. But if I get the html from the menu-bar component and put it inside thedashboard html it works normally. What should I do? I need to do something different to load the bootstrap into a child component?

Note: I load the bootstrap ( bootstrap CSS ) inside the angular.json and it works normally for other components

So, we know that it loads bootstrap correctly, and it works on the parent component but not in child, is child actually being called correctly and the console not showing any issue? — Asfo
– Asfo, Commented Feb 13, 2019 at 1:23

hugomac · Accepted Answer · 2019-02-13 01:47:29Z

1

This is because of default style encapsulation of Angular component.

You could open dashboard.component.ts or your dashboard ts file

Add ViewEncapsulation.None or ViewEncapsulation.ShadowDom depends on your usage. You could refer to this

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
...
@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
...

answered Feb 13, 2019 at 1:47

hugomac

3661 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

How do i load bootstrap in child component in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related