Skip to main content

Tutorial to create an Angular app

· One min read

Steps to install​

  1. Install latest nodejs from https://nodejs.org/en/download

  2. Install Angular

    npm install -g @angular/cli

  3. Install VS Code from https://code.visualstudio.com/

Steps to create app​

  1. Download the initial app from https://angular.io/generated/zips/first-app-lesson-00/first-app-lesson-00.zip

  2. Unzip folder and rename the folder to your app name

  3. Open the folder in VSCode and in terminal run

    yarn install

  4. To start the app

    ng serve

  5. open url http://localhost:4200/ to see the output in the browser

Create the Component​

  1. Open Terminal and run

    ng generate component home --standalone --inline-template --skip-tests

  2. Add HomeComponent to your app's layout

  • Open app.component.ts in the editor.

  • In app.component.ts, import HomeComponent by adding this line to the file level imports.

    import { HomeComponent } from './home/home.component';

  • In app.component.ts, in @Component, update the imports array property and add HomeComponent.

    imports: [
      HomeComponent,
    ],

  • In app.component.ts, in @Component, update the template property to include the following HTML code.

  <main>
    <header class="brand-name">
      <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
    </header>
    <section class="content">
      <app-home></app-home>
    </section>
  </main>