2 maneiras simples de instalar o Bootstrap em um projeto Angular

O que é o Bootstrap

O Bootstrap é um framework css para criar um front-end responsivo para qualquer tamanho de tela.

Conteúdo de exemplo

Troque o conteúdo do arquivo app.component.html pelo conteúdo abaixo. Esse é só um teste para você ver o resultado conforme eu mostrei no vídeo. Nesse arquivo tem um exemplo de 2 componentes e um formulário para que você possa ver a mudança ocorrendo.

<div class="container mt-3">
  <div class="row">
    <div class="col">
      <h2>Exemplo de componentes</h2>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Ação 1</a>
          <a class="dropdown-item" href="#">Ação 2</a>
          <a class="dropdown-item" href="#">Ação 3</a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-1">
    <div class="col">
      <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <strong>Exemplo de alerta</strong> o botão de fechar funciona.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col">
      <h2>Exemplo de formulário</h2>
      <form>
        <div class="form-group">
          <label>Texto</label>
          <input type="text" class="form-control" placeholder="Placeholder campo texto">
        </div>

        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label">Checkbox</label>
        </div>

        <div class="form-group">
          <label>Combobox</label>
          <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <div class="form-group">
          <label>Textarea</label>
          <textarea class="form-control" rows="3"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Salvar</button>
        <button type="submit" class="btn btn-default ml-2">Cancelar</button>
      </form>
    </div>
  </div>
</div>

Lembrando que para você ver o resultado você pode executar a aplicação rodando o comando abaixo.

ng serve --open

Template inicial

Esse template serve para os 2 tipos de instalação do Bootstrap.
Troque o conteúdo do arquivo index.html pelo conteúdo abaixo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Angular Starter</title>
    <base href="/">    
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Maneira 1: Instalação com CDN

CDN é abreviação de Content Delivery Network (ou Rede de Distribuição de Conteúdo). É uma rede de servidores(pontos de presença) que armazenam réplicas do conteúdo de outros sites na memória (cache) e depois os entrega aos visitantes, baseando-se na localização geográfica para conectá-los ao servidor mais próximo e mais rápido, reduzindo o tempo de transferência dos dados (latência).
Fonte: [https://www.gocache.com.br/cdn/]

Dito isso, o Bootstrap tem seu próprio CDN para armazenamento dos arquivos de css e javascript.

CSS

<link  rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"  crossorigin="anonymous">

Javascript

<script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"  crossorigin="anonymous"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"  integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"  crossorigin="anonymous"></script>
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"  crossorigin="anonymous"></script>

Basta copiar o conteúdo acima e colocar no arquivo index.html que a instalação estará concluída.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Angular Starter</title>
    <base href="/">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <app-root></app-root>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

A partir de agora você pode ver o resultado.

Maneira 2: Instalação com NPM

O npm é um gerenciador de pacotes para JavaScript. Para usar o npm é instalado junto com o Node.js, logo você precisa instalar o Node.js para que você consiga rodar os comandos do npm.

O primeiro passo é instalar o Bootstrap, jquery e o popper na aplicação rodando o comando abaixo.

npm install bootstrap@4.1.3 jquery@3.3.1 popper.js@1.14.3 --save

Agora no arquivo angular.json você adiciona os arquivos do Bootstrap nos nós styles e scripts que ficam no caminho architect.build.options conforme abaixo. Você precisa colocar os arquivos na mesma ordem abaixo.

"styles": [
	"node_modules/bootstrap/dist/css/bootstrap.css",
	"src/styles.css"
],
"scripts": [
	"node_modules/jquery/dist/jquery.js",
	"node_modules/popper.js/dist/umd/popper.js",
	"node_modules/bootstrap/dist/js/bootstrap.js"
]