The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

How to initialize a new Angular project

posted on 6.6.2023 by Below Surface in "Angular"

Notice: I'm a React developer and this is my first project with Angular!

Before creating a new Angular project, we need to install the Angular Command Line Interface (CLI):

npm install -g @angular/cli

Then we can initialize the new project:

ng new your-project-name

Make your choices during the initialization process, cd into the project's root and start the local development server:

cd your-project-name
npm run start
// or
ng serve

Expected output:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Here I will list a few basic things that I had to figure out by myself while creating a portfolio page with Angular:

How to add a new component?

ng generate component header

Will create the header component. You just need to import it into app.component.html like this:


How to add local font files?

Within the src directory is a folder named "assets". Here you can create a "fonts" folder and copy the files into it. To use them, you may use the styles.scss file and add:

@font-face {
    font-family: "Montserrat";
    src: url("../src/assets/fonts/montserrat-v18-latin-regular.woff2 ") format("woff2"),
    url("../src/assets/fonts/montserrat-v18-latin-regular.woff") format("woff");
    font-display: swap;

@font-face {     font-family: "Montserrat";     font-weight: 200;     src: url("../src/assets/fonts/montserrat-v18-latin-200.woff") format("woff"),     url("../src/assets/fonts/montserrat-v18-latin-200.woff2") format("woff2");     font-display: swap; }

@font-face {     font-family: "Montserrat";     font-weight: bold;     src: url("../src/assets/fonts/montserrat-v18-latin-700.woff") format("woff"),     url("../src/assets/fonts/montserrat-v18-latin-700.woff2") format("woff2");     font-display: swap; }

Then you can use these fonts for the whole body element by adding this to the styles.scss file:

body {
    font-family: Montserrat, sans-serif;

How to add local images?

It works exactly the same way as adding local font files. Create a folder "/src/assets/images" and put your images in there. Then use them in any .html file like this:

<img src="../../assets/banner.JPG" alt="A beautiful horse rides down a golden beach while the sun sets" />



More posts of this category

Create a fully functional contact form with EmailJS

Create a captcha, the actual contact form and make it work in Angular 16