Angular / SCSS : animation not applied on element

I have a post component and this post component has a comment section. When I click comments I want to show the comments of users. I am able to show these comments, but I wanted to add a nice looking animation to make the transition between open and closed smoother. Unfortunately the animation doesn't get applied. Can someone tell me where I went wrong?

I have a post component and this post component has a comment section. When I click comments I want to show the comments of users. I am able to show these comments, but I wanted to add a nice looking animation to make the transition between open and closed smoother. Unfortunately the animation doesn't get applied. Can someone tell me where I went wrong?

This is what it looks like. I click the comments text and then it displays the comments. Right now it opens without animations, despite the code I added below.

template code: I added the index to the class to make sure I get a nice stagger effect

<div #normalComments *ngIf="commentsDisplayed && comments">
    <ng-container *ngFor="let comment of comments; let i = index">
        <post-comment
          class="comment-{{i}}"
          [user]="user"
          [comment]="comment"
          [allMembersId]="allMembersId"
          (sendDeletedComment)="deleteComment($event)">
        </post-comment>
    </ng-container>

</div>

SCSS code: I add the animation to every class that starts with comment- and the animation-delay depends on the index number of the element

[class^="comment-"] {
animation-name: fadeIn;
animation-duration: 1s;
}

.comment {
&-0 {
animation-delay: 1s;
}

&-1 {
animation-delay: 2s;
}

&-2 {
animation-delay: 3s;
}

&-3 {
animation-delay: 4s;
}

&-4 {
animation-delay: 5s;
}
}

@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}


How to CSS Centering for Angular

How to CSS Centering for Angular

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners. But with the advent of Flexbox, CSS centering became easier and clearer than ever.

In this tutorial, we'll learn how to center elements in CSS and Angular 8 using the modern Flexbox layout.

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners.

But with the advent of Flexbox, CSS centering became easier and clearer than ever.

We'll make use of Stackblitz for our Angular project.

Horizontal Centering

Let's start with horizontal centering. Open the src/app/app.component.html file and add the following <div>:

<div class="center">
  <h1>Hello Angular 8!</h1>
</div>

We add a div with a center class. Inside it, we add an <h1> tag.

Next, open the src/app/app.component.css file and add the center class with the following styles:

.center {
  display: flex;
  justify-content: center;
}

That's it. our content is horizontally centered by simply making the div a flex container and using the justify-content property. Here is a screenshot:

Vertical Centering

Now, let's see how we can center the content vertically using Flexbox.

It's also easy to achieve that using Flexbox by simply adding align-items: center.

Let's first add the following styles to change the color and height of the containing div so we can see the content clearly centered vertically:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

This is the result:

Now, let's apply the vertical centering:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
  align-items: center;
}

This is the result:

This will center any elements inside the div. If you would like to center specific elements, you can use align-self: center, instead, on the element.

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

.center h1{
align-self: center;
}

If you need to center on the whole page, you can simply give the div the same height as the page:

.center {
display: flex;
background-color: #ff1124;
justify-content: center;
height: 100vh;
}

.center h1{
align-self: center;
}

This is a screenshot:

Conclusion

In this quick example, we've seen how we can center elements in CSS horizontally and vertically using Flexblox which provides easy and clear ways to achieve that without resorting to old CSS tricks.

This example was demonstrated with an Angular 8 project but these tricks are not tied to Angular in any way.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others

Further reading

☞ What’s New in Angular 8.0

☞ Angular 8 is coming

☞ Angular 8 Tutorial - User Registration and Login Example

☞ Angular 8 HttpClient & Http Tutorial – Build and Consume RESTful API

☞ Understanding Angular 8's Differential Loading

☞ Angular & NodeJS - The MEAN Stack Guide

☞ Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

☞  Angular 8 Node & Express JS File Upload

☞ Angular Authentication Tutorial for Beginners


Originally published on techiediaries.com

Using CSS Grid Layout in Angular project

Using CSS Grid Layout in Angular project

This CSS Grid layout tutorial is designed for Angular 7/8 developers that want to learn how to build responsive layouts with modern CSS.

This CSS Grid layout tutorial is designed for Angular 7/8 developers that want to learn how to build responsive layouts with modern CSS. We'll first start with a general introduction to learn about the basic concepts and then we'll see how to use it within an Angular 7/8 app to create the famous holy grail layout.

In this tutorial, we’ll teach you how to use CSS Grid layout to easily build interfaces and responsive HTML layouts without resorting to using the old and complex CSS tricks for achieving the same results but instead using clean and easy to maintain CSS styles.

Grid layouts are common in the design of websites and web apps, and thanks to the CSS Grid layout in modern web browsers, we now have an easy way for creating these layouts.

CSS Grid layout is now supported in the major browsers such as Safari, Chrome, Firefox, and Edge so developers can start using it with more confidence and may also use fallbacks for older browsers.

In this first part of our tutorial, we’ll go through the basic concepts of CSS Grid before we build our Angular UI with it.

With CSS Grid layout:

  • You’ll be able to easily create two-dimensional layouts without using complex CSS tricks and HTML tables,
  • You can create layouts with simple HTML markup,
  • You don’t need to use CSS frameworks like Bootstrap.

In this CSS Grid tutorial, you'll learn:

  • What is a grid container and how to create it,
  • What is an implicit and explicit grid,
  • What're grid tracks and how to use them,
  • What're grid gaps or gutters,
  • How to position items using grid line numbers,
  • How to span items across rows and columns,
  • How to name grid lines,
  • How to positioning items by line names,
  • How to name and position items by grid areas, etc.

In a CSS Grid layout, you’ll have two main things, the container grid, and the items. For example:

<div style="display: grid;">
  <div style="background: #00112211;">1</div>
  <div style="background: #00112233;">2</div>
  <div style="background: #00112288;">3</div>
  <div style="background: #00112299;">4</div>
  <div style="background: #001122dd;">5</div>
</div>

By setting the CSS display property to grid, we turn the outer div into a grid container.

Note: You can create a grid container by simply applying the CSS display property to an HTML element like a <div> and gives it a value of grid or inline-grid.

Since we didn’t apply any other properties, we’ll have a default grid that displays the items in rows similar to a vertical stack. Each item takes the full available width.

Note: The Grid items are simply the top-level children of the grid container.

This is a screenshot of our grid:

If you change the display property to inline-grid, items will not span the full available width:

We can see this layout as a one-dimensional grid with one column and 5 rows. But, CSS Grid allows us to create two-dimensional grids with multiple rows and columns.

CSS Grid's columns and rows

A CSS grid can have multiple columns and rows. We can use the grid-template-row and grid-template-column properties to control the layout of the grid by defining the number of columns of rows and their size.

We can update the previous grid without changing anything in the HTML markup but CSS. But, first, since we’ll need to add more CSS, let’s pull the inline styles into a separate CSS class.

This is the HTML markup:

<div class = "grid">
  <div class="item" style="background: #00112211;">1</div>
  <div class="item" style="background: #00112233;">2</div>
  <div class="item" style="background: #00112288;">3</div>
  <div class="item" style="background: #00112299;">4</div>
  <div class="item" style="background: #001122aa;">5</div>
</div>

The outer div has a grid class and each inner div has an item class. It’s up to you to choose the name of your classes and you can pick any names you see convenient.

Let's see how to use the grid-template-rows property to create row tracks:

.grid {
  display: grid;
  grid-template-rows: 20px 20px 40px 20px 40px;
}

We created a row track for each item by specifying a value in pixel (that represents the height of the row) in grid-template-rows template. You can also use other units like % or em, etc.

Just like rows, you can create column tracks by specifying values in the grid-template-columns template.

.grid {
  display: grid;
  grid-template-rows:    20px 20px 40px 20px 40px;
  grid-template-columns: 100px;  
}

We have created one column track with a witdh of 100px:

If you want the column to take all the available width in the container, you can use the fraction unit denoted by fr:

.grid {
  display: grid;
  grid-template-rows:    20px 20px 40px 20px 40px;
  grid-template-columns: 1fr;
}

We've our previous grid:

![](

Now, let's change our markup as follows:

    <div class = "grid">
      <div class="item" style="background: #00112211;">1:1</div>
      <div class="item" style="background: #00112233;">1:2</div>
      <div class="item" style="background: #00112288;">1:3</div>
      <div class="item" style="background: #00112299;">2:1</div>
      <div class="item" style="background: #001122aa;">2:2</div>
    </div>

Next, change CSS grid as follows:

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:    1fr 1fr 1fr;
    }

The grid-template-columns and grid-template-rows properties allow us to create a template for making our grid. If you look at this part of the code:

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    1fr 1fr 1fr;

You’ll be able to depict that we have a grid, each one 1fr unit makes a cell. We can also see it as a 3x3 matrix (3 rows and 3 columns) if you are familiar with this concept in Mathematics. Each cell in the matrix contains how much space the cell takes in the grid layout. We use the fr unit.

With the CSS Grid Layout, we have a new fr unit which stands for* fractional unit:

  • 1fr means 1 part of the available space,
  • 2fr means 2 parts of the available space, etc.

How the space of each cell is calculated?

In our example, we have three columns and each column equally takes 1fr which means each column takes 1/3 of the available space.

We also have three rows and each row takes 1fr which means each row takes 1/3 of the available space.

This is exactly how our grid layout will look like when rendered in HTML except that we don’t have items to fill the sixth cell at the 2:3 position and the last row:

We can identify each cell by its row and column numbers in the row: column format.

By default, each <div> item has been given a position in the grid starting from left. The topmost element is positioned at cell 1:1 but you can also change the default positions.

CSS Grid gaps (Gutters)

You can add space between the grid items using the grid-column-gap and grid-row-gap properties which create gutters between columns and rows.

.grid {
  display: grid;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap:    10px;
  grid-column-gap: 10px;  
}

Note: You can also use grid-gap as a shorthand for grid-row-gap and grid-column-gap. For example: grid-gap: 10px 10px;.
Positioning items in CSS Grid Layout

CSS Grid Layout allows you to control the position and size of each cell individually using the following properties:

  • grid-column-start,
  • grid-column-end,
  • grid-row-start,
  • grid-row-end.

Or also their shorthands, grid-column and grid-row.

Let's see this with example. Let's apply the following styles to the first item:

div:nth-child(1) {
  grid-column-start: 2;
  grid-column-end: 3; 
}

This will position the first item in the second column instead of the first column and will also cause all the other items to shift by one column:

Spanning items in CSS Grid Layout

Grid items span only one column and row tracks by default but can span multiple row and/or column tracks using the same grid-row-* and grid-column-* by simply setting the end position to a line which is more than one row or column away from the start.

For example, let's make the first item span the first two columns by adding the following styles:

div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; 
}

Let's also span the first item in across the first two rows and the last item across the two last rows:

div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; 

grid-row-start: 1;
grid-row-end: 3;
}

div:nth-child(5) {
grid-row-start: 2;
grid-row-end: 4;
}

This is our grid at this point of this tutorial:

.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

grid-row-gap: 1px;
grid-column-gap: 1px;
}

div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
}

div:nth-child(3) {
grid-column-start: 1;
grid-column-end: 3;
}

div:nth-child(5) {
grid-column-start: 1;
grid-column-end: 4;
}

CSS Grid Areas

CSS Grid layout has other features like areas which give more flexebility when building layouts. We can give each cell of the grid a name as follows:

.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

grid-template-areas: "header header header"
"content content sidebar"
"footer footer footer";

grid-row-gap: 1px;
grid-column-gap: 1px;
}

Next, we can position the items inside the grid using area names and the grid-area property as follows:

div:nth-child(1) {
grid-area: header
}

div:nth-child(2) {
grid-area: content
}

div:nth-child(3) {
grid-area: sidebar
}

div:nth-child(4) {
grid-area: footer;
width: 50%;
justify-self: start
}
div:nth-child(5) {
grid-area: footer;
width: 50%;
justify-self: end
}

The fourth and fifth items are both assigned to the footer area so we need to adjust their widths and then use alignment properties like justify-self to divide the footer space between the two items:

After seeing the fundamental concepts of CSS Grid Layout, let's now create the famous holy grail layout with Angular 8.

Prerequisites

Let's get started with the prerequisites of this tutorial. You need to have:

  • Node 8.9+, and NPM 5.5.1+ installed on your development machine,
  • Working knowledge of TypeScript and Angular,
  • Angular CLI installed on your system. At the time of writing this tutorial, angular/cli v8.3.2 is available.

You can install Angular CLI using the following command:

$ npm install -g @angular/cli
Creating an Angular 8 project

Let's now create an Angular 8 project. Open a new terminal and run the following command:

$ ng new angular-cssgrid-demo

You'll be prompted if you Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose the first option which is CSS.

Next, go to your project’s folder and run the following commands to start the development server:

$ cd angular-cssgrid-demo
$ ng serve

Using your web browser, you can visit your app at the http://localhost:4200/ address:

Before proceeding to build our CSS Grid layout example, let's first clean our project from the placeholder code. Head to the src/app/app.component.html and remove the placeholder from the file. This is the content of the file at this point of the tutorial:

 <router-outlet></router-outlet>
Creating the components

The holy grail layout is a web design pattern that is commonly used in websites. The website UI is divided into;

  • A header,
  • A navigation bar,
  • Main content on the middle,
  • A footer.

Components are the basic building blocks of Angular apps. In our application, we can compose the UI using the following parts:

  • Header, navbar and footer components,
  • Home and about pages.

The home and about pages are also components but they are connected to specific routes, so users can navigate between them and the Angular router will take care of inserting the appropriate component in the router-outlet when the corresponding route is triggered.

While, the header, navbar and footer components are common (reusable) parts between all the pages of the application so they need to belong to the app shell in the src/app/app.component.html file.

Let's proceed to create the components. Open a new terminal and run the following commands:

$ ng generate component home
$ ng generate component about
$ ng generate component header
$ ng generate component navbar
$ ng generate component footer

For example, for the header component, we'll have the following files:

  • src/app/header/header.component.html,
  • src/app/header/header.component.spec.ts,
  • src/app/header/header.component.ts,
  • src/app/header/header.component.css.

Components will be automatically added by the CLI to the main application module in the src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
HeaderComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Let's now add the home and about components to the router configuration in the routing module that was generated by the CLI when we created our project. Open the src/app/app-routing.module.ts file and update as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Next, we need to add the headernavbar and footer components to the app shell. Open the src/app/app.component.html file and update it as follows:

<app-header></app-header>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

You can find the selector to reference the component from the templates of the other components from the selector attribute of the meta-information object passed to the component decorator. For example, for the header component, the selector attribute has the app-header value:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}

If you save your changes, your app will be live-reloaded and you should be redirected to the home page and see the following interface:

The header, navbar and footer content will be common between the home and about pages.

Now, let's add some placeholder content to our components and pages. Open the src/app/home/home.components.html file and add the following markup:

<h2>Home</h2>

<p>This demo is making use of CSS Grid layout for creating the layout.</p>
<p> Go to the src/app/app.component.css file for the CSS code of this layout.</p>

Next, open the src/app/about/about.components.html file and add the following markup:

<h2>About us</h2>
<p>This is the about page of our application.</p>

Next, open the src/app/navbar/navbar.components.html file and add the following markup;

<a  [routerLink]="['/home']">HOME</a>
<a [routerLink]="['/about']">ABOUT US</a>

Next, open the src/app/header/header.component.html file and add the following markup;

<header>
<h1>Angular App</h1>
</header>

Next, open the src/app/footer/footer.component.html file and add the following markup;

<footer>
<span>
Copyright 2019
</span>
</footer>

Open the src/app/app.component.css file and add the following styles:

app-root {
height: 100%;
width: 100%;

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px max-content 1fr max-content;
grid-template-areas:
  "header"
  "navbar"
  "main"
  "footer";

}

app-header {
grid-area: header;
}

app-navbar {
grid-area: navbar;
}

router-outlet + * {
grid-area: main;
}

app-footer {
grid-area: footer;
}

Open the src/app/header/header.component.css and add the following CSS code:

:host {
background: #9154f3;
color: whitesmoke;

border-top: 0px solid #9154f3;
font-size: 21px;
font-weight: 500;
line-height: 49px;
border-bottom-width: 1px;
padding: 0 17px;

}

Open the src/app/footer/footer.component.css and add the following CSS code :

:host {
background: #9154f3;
color: whitesmoke;
border-top: 1px solid #9154f3;
padding: 9px 16px;
box-sizing: border-box;
}

Next, open the src/app/navbar/navbar.component.css and add the following CSS code :

:host {
border: 0 solid #e1e1e1;
border-bottom-width: 1px;
height: 49px;
padding: 0 16px;

display: flex;
flex-flow: row;
align-items: center;

}

a {
color: #c697d8;
font-size: 19px;
font-weight: 900;
line-height: 49px;
margin-right: 27px;
text-decoration: none;
}

Next, open the src/app/home/home.component.css and src/app/about/about.component.css files and add the following CSS code:

:host {
padding: 3px 19px;
}

At this point, we would expect to get the correct layout but this is not actually what happens:

![}(https://www.diigo.com/file/image/rscqpoqzocbpdrbeozdsdrssdr/Angulardemo.jpg)

To solve this we need to apply ViewEncapsulation.None to the App component. Open the src/app/app.component.ts file and update as follows:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}

This is a screenshot of our holy grail Angular UI:

Conclusion

In this tutorial, we've introduced CSS Grid layout to Angular developers and seen the fundamental concepts of how to create modern layouts using it. I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Thanks For Visiting, Keep Visiting.

Originally published on techiediaries.com

Using Sass with the Angular CLI

Using Sass with the Angular CLI

Let's explore how we can easily bring in Sass to our Angular CLI projects.

One of the first things you’ll usually do in a project is to bring in Sass to make working with CSS easier.

When working with the Angular CLI, the default stylesheets have the .css extension.

Let's explore how we can easily bring in Sass to our Angular CLI projects.

Starting an Angular CLI Project with Sass

Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter.

Create a new project with Sass with the following:

ng new my-sassy-app --style=scss 

You can also set the --style flag with the following:

  • --style=scss
  • --style=sass
  • --style=less
Converting a Current App to Sass

If you've already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over. You can tell Angular to start processing Sass files with the following command:

ng set defaults.styleExt scss 

This will go ahead and tell the **Angular CLI to start processing .scss files. If you want to peek under the hood at what this command did, check out the Angular CLI **config file: .angular-cli.json.

You'll find the new config line at the bottom of the file:

"defaults": { "styleExt": "scss", "component": { } } 

Changing the CSS Files to Sass

The Angular CLI will start processing Sass files now. However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.

Using Sass Imports

I personally like creating Sass files for project variables and for project mixins. This way, we can bring in any variables/mixins we'll need quickly and easily.

For instance, let's create a brand new CLI app:

ng new my-sassy-app --style=scss 

Next, we'll create the following files:

|- src/ |- sass/ |- _variables.scss |- _mixins.scss |- styles.scss 

To start using these new Sass files, we'll import the _variables.scss and _mixins.scss into the main styles.scss.

// src/sass/styles.scss @import &apos;./variables&apos;; @import &apos;./mixins&apos;; 

The last step is to update our .angular-cli.json config to use this new src/sass/styles.scss instead of the src/styles.scss. In our .angular-cli.json file, just change the following line to point to the right styles.scss.

"styles": [ "sass/styles.scss" ], 

I like separating out our Sass into its own folder because it allows us to create a more robust Sass foundation. I personally lean towards the Sass 7-1 Pattern.

Now when we start up our app, these new Sass files will be used!

Importing Sass Files Into Angular Components

We have new _variables.scss and _mixins.scss files that we will probably want to use in our components. In other projects, you may be used to having access to your Sass variables in all locations since your Sass is compiled by a task runner.

In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables.scss file.

One way to do this is to @import with a relative path from the component. This may not scale if you have many nested folders or eventually move files around.

The CLI provides an easy way to import Sass files using the ~.

No matter what component Sass file we're in, we can do an import like so:

// src/app/app.component.scss @import &apos;~sass/variables&apos;; // now we can use those variables! 

The tilde (~) will tell Sass to look in the src/ folder and is a quick shortcut to importing Sass files.

Sass Include Paths

In addition to using the ~, we can specify the includePaths configuration when working with the CLI. To tell Sass to look in certain folders, add the config lines to .angular-cli.json like in the app object next to the styles setting.

"styles": [ "styles.scss" ], "stylePreprocessorOptions": { "includePaths": [ "my-path" ] }, 

Using Bootstrap Sass Files

Another scenario we'll need to do often is to import third party libraries and their Sass files.

We’ll bring in Bootstrap and see how we can import the Sass files into our project. This is good since we can pick and choose what parts of Bootstrap we want to use. We can also import the Bootstrap mixins and use them in our own projects.

To get us started, install bootstrap:

npm install --save [email protected] 

Note: We're using the 4.0 beta because 4.0 is built with Sass and gives the proper .scss files.

Adding Bootstrap CSS File

Now that we have Bootstrap, let's look at how we can include the basic CSS file. This is an easy process by adding the bootstrap.css file to our .angular-cli.json config:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "sass/styles.scss" ], 

Note: We're using the .. because the CLI starts looking from within the src/ folder. We had to go up one folder to get to the node_modules folder.

While we can import the Bootstrap CSS this way, this doesn't let us import just sections of Bootstrap or use the Sass variables/mixins that Bootstrap provides.

Let's look at how we can use the Bootstrap Sass files instead of the CSS file.

Adding Bootstrap Sass Files

Let’s cut down the number of CSS rules that we use in our app. Let’s look at all the Sass files that Bootstrap uses:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";

That's a lot of tools that you may not use in your own project.

Inside our src/sass/styles.scss file, let's import only the Bootstrap files we'll need. Just like we imported Sass files from the src folder using the tilde (~), the tilde will also look into the node_modules folder.

We can do the following to only get the Bootstrap base tools:

// src/sass/styles.scss @import &apos;~bootstrap/scss/functions&apos;, &apos;~bootstrap/scss/variables&apos;, &apos;~bootstrap/scss/mixins&apos;, &apos;~bootstrap/scss/print&apos;, &apos;~bootstrap/scss/reboot&apos;, &apos;~bootstrap/scss/type&apos;; 

Conclusion

The tilde (~) makes importing Sass files in the Angular CLI super easy! Hope this quick tip was helpful in your Angular journey. Thanks for reading.

While it is a bit more work to have to import files into every component that you'll want to use them in, it's not too bad of a workaround to use the ~.