Adding Bootstrap only to Specific Components in Angular (version 13)

Issue

My problem is that I have a project in Angular 13 (current latest) and I need to add the Bootstrap framework only to a specific set of components in this project.

Is there any chance I can link it on a per component basis?

Expected Question

Why don't I add Bootstrap to the whole project?

This project is a migration of an existing no frameworks or libraries website only using plain HTML-CSS-JS of small-medium scale. The time for migration is very limited (so little time in fact that I have plain JavaScript in my component.ts files). I also am not familiar with Angular, first time starting such sized project with any front-end web framework in fact.

Chosen Answer Initially, I did choose to add bootstrap per component and referencing it from my assets' folder. However, after the input of a fellow user about view encapsulation leading to terrible performance consequences, I did manage to update the given CSS code to be compatible with a global integration of the Bootstrap 5 framework. I recommend others just fix compatibility if possible as well due to the performance issues. I used the package from NPM if anyone is curious ng add bootstrap. I can confirm that also the CDN from Bootstrap also works.

Solution

Save Bootstrap css file in assets folder and add the path in component styleUrls.

My folder structure is -

my-app/
├─ node_modules/
├─ src/
│  ├─ app
│  ├─ assets

Include CSS path in component -

@Component({
selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.css',
     '../../assets/bootstrap.min.css'
  ],
})

Answered By - Pinaki