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:
<app-header></app-header>
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" />