Skip to content

Instantly share code, notes, and snippets.

@odnodn

odnodn/app.component.html

Forked from angular-academy-devs/app.component.html
Created November 21, 2021 16:51
Show Gist options
  • Save odnodn/788dafbfdd908fa7bd00808cfcc52d8b to your computer and use it in GitHub Desktop.
Save odnodn/788dafbfdd908fa7bd00808cfcc52d8b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion course-cards.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,8 @@ export class CourseCardsComponent {
    }

    navigate(path) {
    this.router.navigate([{outlets: {primary: path, sidemenu:path}}], {relativeTo: this.route});
    this.router.navigate([{outlets: {primary: path, sidemenu:path}}],
    {relativeTo: this.route});
    }

    }
  2. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions course-cards.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    @Component({
    selector: 'app-course-cards',
    templateUrl: './course-cards.component.html',
    styleUrls: ['./course-cards.component.css']
    })
    export class CourseCardsComponent {

    constructor(private router: Router, private route: ActivatedRoute) {

    }

    navigate(path) {
    this.router.navigate([{outlets: {primary: path, sidemenu:path}}], {relativeTo: this.route});
    }

    }

  3. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions course-section-navigation.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="col-xs-6 col-lg-4">
    <h2>Development</h2>
    <p>...</p>
    <p><a class="btn btn-secondary" (click)="navigate('development')" role="button">View details »</a></p>
    </div>
  4. @angular-academy-devs angular-academy-devs renamed this gist Oct 11, 2016. 1 changed file with 0 additions and 0 deletions.
    0 course-sub-categories-2.component.html → course-sub-categories-2.config.ts
    View file
    File renamed without changes.
  5. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions course-sub-categories-2.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    {
    path: 'courses',
    component: CoursesComponent,
    children: [
    {
    path: '',
    component: CourseCardsComponent
    },
    // ++ THIS PART WAS ADDED
    {
    path: ':id',
    component: CoursesCategoryComponent
    },
    // -- THIS PART WAS ADDED
    {
    path: '',
    outlet: 'sidemenu',
    component: SideMenuComponent
    },
    {
    path: ':id',
    outlet: 'sidemenu',
    component: SideMenuComponent
    }
    ]
    }
  6. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions router-sub-section.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,9 @@
    <h2>Development</h2>
    <p>... </p>
    <p><a class="btn btn-secondary" routerLink="development" role="button">View details »</a></p>
    </div><!--/span-->
    </div>
    <div class="col-xs-6 col-lg-4">
    <h2>IT & Software</h2>
    <p>... </p>
    <p><a class="btn btn-secondary" routerLink="it-software" role="button">View details »</a></p>
    </div><!--/span-->
    </div>
  7. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions router-sub-section.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <div class="col-xs-6 col-lg-4">
    <h2>Development</h2>
    <p>... </p>
    <p><a class="btn btn-secondary" routerLink="development" role="button">View details »</a></p>
    </div><!--/span-->
    <div class="col-xs-6 col-lg-4">
    <h2>IT & Software</h2>
    <p>... </p>
    <p><a class="btn btn-secondary" routerLink="it-software" role="button">View details »</a></p>
    </div><!--/span-->
  8. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions course-sub-categories-1.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    {
    path: 'courses',
    component: CoursesComponent,
    children: [
    {
    path: '',
    component: CourseCardsComponent
    },
    {
    path: ':id',
    component: CoursesCategoryComponent
    },
    {
    path: '',
    outlet: 'sidemenu',
    component: SideMenuComponent
    }
    ]
    }
  9. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions side-menu.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    {
    path: 'courses',
    component: CoursesComponent,
    children: [
    {
    path: '',
    component: CourseCardsComponent
    },
    {
    path: '',
    outlet: 'sidemenu',
    component: SideMenuComponent
    }
    ]
    }
  10. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions side-menu.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,4 @@ export class SideMenuComponent {
    route.params.subscribe(params => console.log("side menu id parameter",params['id']));

    }


    }
    }
  11. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions side-menu.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    @Component({
    selector: 'app-categories-menu',
    templateUrl: './categories-menu.component.html',
    styleUrls: ['./categories-menu.component.css']
    })
    export class SideMenuComponent {

    constructor(route: ActivatedRoute) {

    route.params.subscribe(params => console.log("side menu id parameter",params['id']));

    }


    }
  12. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. No changes.
  13. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions nested-child-route.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    {
    path: 'courses',
    component: CoursesComponent,
    children: [
    {
    path: '',
    component: CourseCardsComponent
    }
    ]
    }
  14. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 0 additions and 11 deletions.
    11 changes: 0 additions & 11 deletions courses.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,18 @@
    <main>

    <div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-xs-12 col-sm-9">

    <ol class="breadcrumb">
    <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
    <li class="breadcrumb-item active">Courses</li>
    </ol>

    <div class="jumbotron">
    <h1>Course Categories!</h1>
    <p>This is a list of course categories, click on each to see a list of courses for a given category.</p>
    </div>

    <router-outlet></router-outlet>

    </div>

    <router-outlet name="sidemenu"></router-outlet>

    </div>

    </div>

    </main>
  15. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 29 additions and 0 deletions.
    29 changes: 29 additions & 0 deletions courses.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <main>

    <div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-xs-12 col-sm-9">

    <ol class="breadcrumb">
    <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
    <li class="breadcrumb-item active">Courses</li>
    </ol>

    <div class="jumbotron">
    <h1>Course Categories!</h1>
    <p>This is a list of course categories, click on each to see a list of courses for a given category.</p>
    </div>

    <router-outlet></router-outlet>

    </div>

    <router-outlet name="sidemenu"></router-outlet>

    </div>

    </div>

    </main>
  16. @angular-academy-devs angular-academy-devs revised this gist Oct 11, 2016. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions top-menu.config.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    export const routerConfig: Routes = [
    {
    path: 'home',
    component: HomeComponent
    },
    {
    path: 'about',
    component: AboutComponent
    },
    {
    path: 'courses',
    component: CoursesComponent
    },
    {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
    },
    {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full'
    }
    ];
  17. @angular-academy-devs angular-academy-devs created this gist Oct 11, 2016.
    13 changes: 13 additions & 0 deletions app.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container">
    <a class="navbar-brand">Angular Router</a>
    <ul class="nav navbar-nav" routerLinkActive="active">
    <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
    <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
    <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
    </div>
    </nav>

    <router-outlet></router-outlet>