Build Your First Angular App

Playlist for the course
    html {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    main {
        position: relative;
        padding-top: 55px;
    }
    
    /* Ensure display:flex and others don't override a [hidden] */
    [hidden] { display: none !important; }
    
    footer {
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
Dan Wahlin4:067 months ago
    <!DOCTYPE html>
    <html>
    <head>
        <base href="/">
        <title>Angular Core Concepts</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Angular App">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
              crossorigin="anonymous">
        <link href="assets/styles.css" rel="stylesheet" />
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <h1>Hello World</h1>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <h1>{{ title }}</h1>
      `
    })
    export class AppComponent implements OnInit {
      title: string;
      constructor() { }
    
      ngOnInit() {
        // We call a service that gets us the data
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    import { NgModule }      from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { CustomersComponent }  from './customers.component';
    
    @NgModule({
      imports:      [ CommonModule ],
      declarations: [ CustomersComponent ],
      exports: [ CustomersComponent ]
    })
    export class CustomersModule { }
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Order Total</th>
            </tr>
        </thead>
        <tr>
            <td>
                <a>
                    
    import { NgModule }      from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { CustomersComponent }  from './customers.component';
    import { CustomersListComponent } from './customers-list/customers-list.component';
    import { FilterTextboxComponent } from './customers-list/filter-textbox.component';
    
    @NgModule({
      imports:      [ CommonModule ],
      declarations: [ CustomersComponent, CustomersListComponent, FilterTextboxCompo
      exports: [ CustomersComponent ]
    })
    export class CustomersModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { CustomersModule } from './customers/customers.module';
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule, CustomersModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    <filter-textbox></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('name')">City</th>
                <th  (click)="sort('name')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
        
    <filter-textbox></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('city')">City</th>
                <th (click)="sort('orderTotal')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
        
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    
    import { DataService } from './data.service';
    import { SorterService } from './sorter.service';
    
    @NgModule({
        imports: [  ],
        providers: [ ]
    })
    export class CoreModule { }
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    
    import { DataService } from './data.service';
    import { SorterService } from './sorter.service';
    
    @NgModule({
        imports: [  ],
        providers: [ DataService, SorterService ]
    })
    export class CoreModule { }
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    import { Observable } from 'rxjs/Observable';
    import { map, catchError } from 'rxjs/operators';
    
    import { ICustomer, IOrder } from '../../app/shared/interfaces';
    
    @Injectable()
    export class DataService {
    
        baseUrl: string = 'assets/';
        
        constructor(private http: HttpClient) { }
    import { Component, OnInit } from '@angular/core';
    
    import { DataService } from '../core/data.service';
    
    @Component({
        selector: 'app-customers',
        templateUrl: './customers.component.html'
    })
    export class CustomersComponent implements OnInit {
        title: string;
        people: any[];
        
        constructor(private dataService: DataService) {}
        
    import { Component, OnInit } from '@angular/core';
    
    import { DataService } from '../core/data.service';
    import { ICustomer } from '../shared/interfaces';
    
    @Component({
        selector: 'app-customers',
        templateUrl: './customers.component.html'
    })
    export class CustomersComponent implements OnInit {
        title: string;
        people: any[];
        
        constructor(private dataService: DataService) {}
    <filter-textbox (changed)="filter($event)"></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('city')">City</th>
                <th (click)="sort('orderTotal')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    import { SorterService } from '../../core/sorter.service';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers'},
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers'},
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { CustomersComponent } from './customers.component';
    
    const routes: Routes = [
        { path: 'customers', component: CustomersComponent }
    ];
    
    @NgModule({
        imports: [ RouterModule.forChild(routes) ], 
        exports: [ RouterModule ]
    })
    export class CustomersRoutingModule {
    
    <div *ngIf="customer">
        <h1>Orders for {{ customer.name | capitalize }}</h1>
    
        <table class="table table-hover orders-table" 
               *ngFor="let order of orders">
            <tr *ngFor="let orderItem of order.orderItems">
                <td>{{ orderItem.productName }}</td>
                <td>{{ orderItem.itemCost | currency:'USD':'symbol' }}</td>    
            </tr>
        </table>
    </div>
    <div *ngIf="!customer">
       No customer found
    </div>  
    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute, Params } from '@angular/router';
    
    import { DataService } from '../core/data.service';
    import { ICustomer, IOrder, IOrderItem } from '../shared/interfaces';
    
    @Component({
      selector: 'app-orders',
      templateUrl: './orders.component.html',
      styleUrls: [ './orders.component.css' ]
    })
    export class OrdersComponent implements OnInit {
    
      orders: IOrder[] = [];
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers' },
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
      constructor() { }
    
      ngOnInit() {
    
      }
Dan Wahlin3:317 months ago