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

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.

CodePudding user response：

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'
  ],
})

CodePudding user response：

Download the bootstrap css file and save it in your assets folder. Then include it in the styleUrls array of your component:

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