Skip to content
Angular Start

Getting Started

As I mentioned for the previous applications, there are a few things that we will do at the beginning of every application build, to get things ready. These are things like:

  • Generating the application
  • Installing extra packages (if necessary)
  • Restructuring the generated application to our liking

Generate the Application

Terminal window
npm install -g @angular/cli
Terminal window
ng new angularstart-giflist --defaults --style=scss --inline-template --inline-style --skip-tests

With the project created, we are going to make just a few modifications to get things going.

Install Packages

In the last application build, we created some very bare bones styles for the application. This time we are going to integrate Angular Material which will provide us with some pre-styled components that we can make use of in our application (like buttons, and input fields) and it will also help us theme our application. We will be using one of the pre-built themes for this application, but in our next application walkthrough we will look at building our own theme with Angular Material.

Terminal window
ng add @angular/material

You will be prompted to choose a theme — you can use whatever you like but I chose the Magenta/Violet theme.

As I mentioned, we will choose the Custom option for the next application.

You can select y to the prompt about typography, and you should also Include and enable animations.

Everything required for Angular Material will now have been set up automatically for you.

Remove the junk

Now let’s remove the junk from our root component, keeping just the <router-outlet> in the template.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';


@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: ` <router-outlet /> `,
  styles: [],
})
export class AppComponent {}

Set up the Home Component

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


@Component({
  selector: 'app-home',
  template: ` <p>Hello world</p> `,
})
export default class HomeComponent {}
import { Routes } from '@angular/router';


export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component'),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

Ok, that should do it! Now we have a nice base to work from.