event-route.activator.service.ts routes.ts app.module.ts
Guarding Route Activation
event-route.activator.service.ts routes.ts app.module.ts
Navigation from menu
Step 1: create a component like create-event.component.ts Step 2: routes.ts file Step 3: createEventComponent component register in app.module.ts file Step 4: add router link in nav html file
Adding your first route
Step 1: events-app.component.ts file Step 2: routes.ts file Step 3: app.module.ts file Register router for routing Step 4 : index.html Step 5: event-details.component.ts file Step 6: event.service.ts file Step 6: app.module.ts file Register event details file
Linking routes and accessing routes parameters
Step 1: event-details.component.ts file Step 2: event-thumbnail.component.ts file Step 3: nav-bar.component.html file
Adding your first route
Step 1: events-app.component.ts file Step 2: routes.ts file Step 3: app.module.ts file Step 4: index.html file. Added our base tag
Angular Component Interaction – Output Decorator
event-thumbnail.component.ts event-list.component.ts file app.module.ts file
Wrapping third party service in Angular
Step 1: npm install toastr –save Step 2: import angular.json file toastr.min.css in styles and toastr.min.js in scripts Step 3: Add a click event before that create a common service (step 4) Step 4: create a service file toastr.service.ts into app/common folder
Creating your first service in Angular
At first creating event.service.ts file into app/events/shared event.service.ts file import service file in app.module file Import service file and inject into event-list.component.ts event-thumbnail.component.ts file
style and ngStyle binding in Angular
event-list.component.ts file event-thumbnail.component.ts file app.module.ts file