How to Install Font Awesome using Angular 9 CLI

This article is focused on how to install font awesome using Angular 9 CLI. You’ll learn install font awesome Angular 9. This article will give you simple example of npm install font awesome Angular 9. I would like to show you install font-awesome Angular 9. You just need to some step to done Angular 9 install font awesome icons.

Icons is a basic requirement of each project. icons indicate more, you don’t need to write label for it. icons also make beautiful layout of our application. If you think to use icons in your application then you will always prefer to use font awesome icons. font-awesome provide lots of icons and you can use it very easily.

So, i think example, i will learn how to install font awesome icons in angular 9 application step by step. it’s very simple but, for new developer that can understand how it you can do it.

Let’s see bellow steps:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-new-app

Step 2: Install font-awesome

In this step, you need to just install font-awesome on your angular 9 and import css file to style.css file. this is only for css importing. so you can run command bellow:

npm install font-awesome --save

Step 3: Import CSS

After successfully, installed font-awesome, we need to import css files on angular.json file. so let’s add following lines on it.

angular.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "appFont": {
      ....
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.css",
              "src/styles.css"
            ],
      ......

OR, you can also give path like as this way, if above is not working:

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "appFont": {
      ....
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "../node_modules/font-awesome/css/font-awesome.css",
              "src/styles.css"
            ],
      ......

Step 4: Use Font Awesome Icons

Now we are ready to use font awesome classes in our html file. so let’s add following code on your app.component.html file.

src/app/app.component.html

Read Also: How to Add Bootstrap in Angular 9

<h1>Angular 9 Font Awesome | How to install font awesome in Angular 9? - ItSolutionStuff.com</h1>
   
<i class="fa fa-user fa-5x"></i>
<i class="fa fa-dashboard fa-5x"></i>
<i class="fa fa-money fa-5x"></i>
<i class="fa fa-home fa-5x"></i>
<i class="fa fa-th fa-5x"></i>

You can run application.

You can also use icons from here: Font Awesome Icons List.

I hope it can help you…

#angular #webdev #javascript

What is GEEK

Buddha Community

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Angular Sass: How To Use Sass In Angular 9 Tutorial

Angular supports Sass, CSS, and Less to style global application styles as well as component styles. Angular components styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles.

Angular Sass Example

Why use Angular Sass? Well!! Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use things like variables, nested rules, inline imports, and more. It also supports you to keep things organized and enables you to create style sheets faster.

In short,  Sass is a CSS preprocessor, which combines unique features such as variables, nested rules, and mixins (sometimes referred to as syntactic sugar) into regular CSS. The main object of Sass is to make the CSS coding process more comfortable and more efficient.

Sass is compatible with all versions of CSS. When working with the Angular CLI, the default stylesheets have the .css extension. We are using Angular CLI 8. So, if you have not used previously, then please upgrade your  CLI version. We will use the Bootstrap 4 Framework for this demo and see how we can configure the Sass in our Angular 9 application.

#angular #angular 9 #angular cli #css #angular sass

Installing Angular 9 with the CLI | Angular Tutorial for Beginners (2020)

Learn what Angular is, what Angular CLI is and how to install a new Angular project by using the CLI.

#angular #angular 9 #cli

Useful command of Angular CLI

I made a small list of commands which use a lot in Angular CLI and I want to share my list with you.

First of all, we need to install Angular CLI.

npm install -g @angular/cli

This command we need to write in terminal or console.

When cli is installed we need to create our first project:

ng new name-of-project

This command will create an empty project for us. If want to use in our project SCSS files instead of CSS,we must write:

ng new name-of-project --style=scss

After project creation, we need to install all packages which contains in packege.json.

npm intall

Now packages are installed and we can run our project:

ng serve

If we want to run and open our project in browser we should use:

ng serve --open 

By default Angular run project on port:4200, if we want to set another port:

ng serve --port=4222

Also we can use both those option in one command:

ng serve --open --port=4222 

Setting the watch option false will stop automatic rebuilds when you change code:

ng serve --watch=false

When running ng serve, the compiled output is served from memory, not from disk. This means that the application being served is not located on disk in the dist folder.

ng serve --poll 1000

Sometimes could be very useful to build project in production mode:

ng build --prod

Also we could use Ahead of Time Compilation which compiles your app at build time:

ng build --prod --aot

It is time to start developing our project, that means we need to create a new component, class, module, or something else. Angular CLI can help us with that:

ng generate component name-of-component

#angular-cli #angular #cli #front-end-development

Angular 9 Material Example Tutorial For Beginners

Angular Material is a material library that we need to install for better UI/UX. We will use the Angular 9 and Angular Material 9 library. Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktop.

Angular Material helps in creating faster, beautiful, and responsive web apps and websites. You can find more about Angular Material on their  official docs.

Angular 9 Material Example

Angular Material components will help us in constructing attractive UI and UX, consistent, and functional web pages and web applications while keeping to modern web design principles like browser portability and compatibility, device independence, and graceful degradation.

We use Angular 9 CLI to generate a new Angular project and Angular Material 9 library for this demo. If you don’t know about Angular 9, then check out:  Angular 9 CRUD Tutorial.

#angular 9 #angular 9 cli #angular material