Angular 7 tutorial – creating an Angular Bootstrap app, step by step

Author: Dawid Adach

What will you learn

During this course you will also learn many powerful and useful technologies such as:

Angular 6
Angular 7

The newest Angular 7 with its latest features. The technology used by Google, Wix, weather.com, -and Forbes.

Angular CLI
Angular CLI

Angular Command Line Interface which allows you to speed up your development. Creation of projects, classes, services has never been easier.

Typescript
Typescript

Typescript is a superset of JavaScript which allows you to use extended functionalities which were reserved untill now to more advanced languages like Java or C++.

sass logo
NPM

Within this tutorial, you will also learn how to use the Node Package Manager to easily install and maintain your project dependencies.

Cross platform
Cross-platform

Regardless whether you are using Windows, macOS or Unix - this tutorial show you how to use Angular on each operating system.

SPA
SPA

If you have ever wondered why some websites are blazing fast you should continue reading. This tutorial will guide you how to build a Single Page Application, which works without reloading.

SPA
RWD

Within this tutorial you will learn about Responsive Web Development - in other words, how to build a website which looks awesome on across devices. Regardless whether it's a 30-inch monitor or a smartphone screen.

material design for bootstrap logo
MDB

This tutorial will also teach you how to combine two powerful tools - Bootstrap and Material Design to achieve an outstanding effect on your website or an application.

Start the course

Learn the most powerful JavaScript framework by creating your own app. We'll guide you step by step from basic to advanced concepts of Angular technology.

Horizontal

I. Installation Start

  1. Angular environment installation

  2. Angular & CLI (Command Line Interface)

Mockups

II. Getting Started:

  1. Lesson 1 – Getting started

  2. Lesson 2 - Components overview

  3. Lesson 3 – Create, export & import components

Horizontal

III. Agenda App Start

  1. Lesson 1 – Overview

  2. Lesson 2 - Using Bootstrap in Angular

  3. Lesson 3 – Child components

  4. Lesson 4 – Passing data to components

  5. Lesson 5 - Using ngFor loop

  6. Lesson 6 – Conditional rendering using ngIf

  7. Lesson 7 - Emit and handle events

  8. Lesson 8 – Using modals in Angular

  9. Lesson 9 – Forms and inputs

  10. Lesson 10 - Add new Event

  11. Lesson 10 - Summary

Mockups

IV. Angular Crash Course Part 1 Start

  1. What is Angular?

  2. Angular application architecture

  3. Setting up the environment

  4. First Angular application

  5. Angular project structure

  6. AngularJS vs Angular vs Angular X

Mockups

V. TypeScript Tutorial Start

  1. Typescript fundamentals

  2. Our first Typescript code

  3. Static vs dynamic typing in typescript

  4. Typescript variable types

  5. Typescript variable scope

  6. Default methods for variables

  7. Typescript type assertion

  8. Typescript anonymous functions

  9. Typescript arrow functions

  10. 10+ more (coming soon)

Mockups

VI. Angular Crash Course Part 2

    30+ lessons (coming soon)

Mockups

VII. Building a Single Page Application:

    50+ lessons (coming soon)

Mockups

VIII. Angular Crash Course Part 3

    40+ lessons (coming soon)

Previous lesson Next lesson
Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...