CODEWITHSUNDEEP
typescriptangular
abhilash reddy
abhilash reddy

Reputation: 1596

How to destroy a component in angular2 router and load new component when the link is pressed?

Hello friends i have an angular2 router with two links where one containing a input box and another with normal text.when i enter data into input box and switch between the router links and if i return to the link containing the input box the text entered in the input field still exists.I want to destroy the component and reinitialize the component when i return to the link. Here is my code Link-http://plnkr.co/edit/K90d2GeRegc4G0HjX0FW?p=preview

    import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'

@Component({
  selector: 'sup-cmp'
})
@View({
  template: `
    <div>
      <h2>Welcome World</h2>
    </div>
  `
})
class SupCmp {}

@Component({
  selector: 'home-cmp'
})
@View({
  template: `
    <div>
    <input type="text" />
    </div>
  `
})
class HomeCmp {}


@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    <div>
      <h1>Hello {{message}}!</h1>
      <a [router-link]="['./HomeCmp']">home</a>
      <a [router-link]="['./HelloCmp', {name: 'brian'}]">hello</a>
      <hr>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  {path: '/', component: HomeCmp, as: 'HomeCmp'}
  {path: '/hello/:name', component: SupCmp, as: 'HelloCmp'}
])
export class App {
  message:string = 'world';
}

bootstrap(App, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname)
]);

// In alpha-38:
//bootstrap(App, [routerBindings(App)]);

1.I have 2 links namely Home and Hello. 2.Enter some data into Input box which is in home link and switch to Hello link and return back to home link. 3.The text which u entered still exists. 4.I want to load new component when i click a link... I dont know how to destroy a component in angular2 router...please help friends...thanks in advance

Upvotes: 1

Views: 2305

Answers (1)

littleStudent
littleStudent

Reputation: 127

You could use angulars lifecycle events for setting up the initial data.

check out onInit.

Upvotes: -1

Related Questions