Skip to content

Instantly share code, notes, and snippets.

🤩
Vue 3 streak

Gábor Soós blacksonic

🤩
Vue 3 streak
View GitHub Profile
@blacksonic
blacksonic / component-relative-paths-webpack.ts
Created Jun 9, 2016
Component-Relative paths in Angular 2 for Webpack
View component-relative-paths-webpack.ts
import { Component } from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle from './header.component.css';
@Component({
selector: 'my-app',
template: headerTemplate,
styles: [headerStyle]
})
export class HeaderComponent implements OnInit {
@blacksonic
blacksonic / app.component.ts
Last active Jun 24, 2016
Upgrading to the new Angular 2 router - part 1
View app.component.ts
// components/app/app.component.ts
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprected';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
@RouteConfig([
{
path: '/',
@blacksonic
blacksonic / routes.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 2
View routes.ts
// routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from './components/hero-detail/hero-detail.component';
export const appRoutes: RouterConfig = [
{ path: '', component: HeroesComponent, terminal: true },
{ path: 'detail/:id', component: HeroDetailComponent }
];
@blacksonic
blacksonic / main.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 3
View main.ts
// main.ts
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { AppComponent } from './components/app/app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
@blacksonic
blacksonic / main.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 4
View main.ts
// main.ts
import { APP_ROUTER_PROVIDER } from './routes';
import { AppComponent } from './components/app/app.component';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDER
]);
@blacksonic
blacksonic / routes.html
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 5
View routes.html
<a [routerLink]="['/Heroes']">Heroes</a>
<a [routerLink]="['/HeroDetail', { id: 1 }]">Captain America</a>
@blacksonic
blacksonic / routes.html
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 6
View routes.html
<a [routerLink]="['']">Heroes</a>
<a [routerLink]="['detail', 1]">Captain America</a>
@blacksonic
blacksonic / redirect.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 7
View redirect.ts
// navigates to Captain America's page
this.router.navigate(['detail', 1]);
@blacksonic
blacksonic / hero-detail.component.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 8
View hero-detail.component.ts
// components/hero-detail/hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { RouteParams } from '@angular/router-deprected';
import { HeroService } from '../../services/hero/hero.service'
@Component({ ... })
export class HeroDetailComponent implements OnInit {
constructor(private params: RouteParams, private heroService: HeroService) {}
@blacksonic
blacksonic / hero-detail.component.ts
Created Jun 24, 2016
Upgrading to the new Angular 2 router - part 9
View hero-detail.component.ts
// components/hero-detail/hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HeroService } from '../../services/hero/hero.service'
@Component({ ... })
export class HeroDetailComponent implements OnInit {
constructor(private route: ActivatedRoute, private heroService: HeroService) {}
You can’t perform that action at this time.