Angular Starter Kit + Exercises

This project was generated with Angular CLI version 7.2.3.

Exercises

Introduction

The goal of this exercise is to develop a web application for conference management and organization. Application should show different pages which can include a list of speakers and/or talks.

Set up and run

In your terminal execute following commands:

• npm install
• npm run start

Beginner

Goal: Show details of a single talk

• Show talk details:
  • Name
  • Speaker name
  • Topic
  • Location
• Show participation status
• Show a button to change participation status (follow/unfollow)

Technical details:

• Generate new component (you can use Angular CLI):
  • talk-details.component.ts
• Add data-bindings to pass data from parent
• Make sure data is shown on the screen
• Add new button element
• Make sure button does change participation status

All data could be contained in *.component.ts files.

All data should be coming from an angular variable and NOT HARDCODED in the HTML

Expected output:

Intermediate

Goal: Enhance application with routing (split by pages) and add navigation header.

• Routes:
  • /speakers
  • /talks
• Pages:
  • Speakers
  • Talks
• Header:
  • Home
  • Speakers
  • Talks

Technical details:

• Generate new components:
  • speakers.component.ts
  • talks.component.ts
• Components above should use its children components to list details
  • speakers.component.ts should show 1-N speaker-details.component.ts
  • talks.component.ts should show 1-N talk-details.component.ts
  • listing should be generated dynamically using appropriate angular directives, see the code below to generate your stub
• Configure angular router (use RouterModule)
• Add routes:
  • /speakers -> component: speakers.component.ts
  • /talks -> component: talks.component.ts
• Add header component to the top of the page:
  • header.component.ts
• Click on header item should redirect to corresponding page

Expected output:

Stubbed data

const talks = [
  {
    event_name: "Angular Today and Tomorrow",
    author: "John Doe",
    topic: "Front-End",
    description: "Ubi est fortis tata? Est teres classis, cesaris."
  },
  {
    event_name: "How To Hack an Angular app?",
    author: "Jim Jones ",
    topic: "Front-End",
    description: "Why does the lubber die?"
  },
  {
    event_name: "Docker in Production",
    author: "Ringo Starr",
    topic: "Back-End",
    description: "Never trade a kraken."
  },
  {
    event_name: "Angular vs Vue",
    author: "Chuck Norris",
    topic: "Front-End",
    description: "Yellow fever, love, and malaria.."
  }
];

const speakers = [
  {
    name: "Pinco",
    surname: "Pallo",
    country: "Moldavia",
    age: "42"
  },
  {
    name: "Jack",
    surname: "Sparrow",
    country: "Cayman Islands",
    age: "17"
  },
  {
    name: "Jesus",
    surname: "Christ",
    country: "Palestine",
    age: "33"
  }
];

Advanced

Step 1

Goal: Enhance application with angular services and retrieve data from API.

Technical details:

• Generate new services:
  • speakers-data.service.ts
  • talks-data.service.ts
• Implement services:
  • use angular http client
  • add services into app.module
• Update components implementation:
  • dispatch fetch action (one that triggers request to API) during ngOnInit phase
  • speakers.component and talks.component should use services to retrieve data

Expected output:

• Components should not use TBD.json and TBD.json data

Step 2

Goal: Enhance application with ngRx store.

Technical details:

• Add new dependencies:
  • @ngrx/effects
  • @ngrx/store
  • TBD if needs more
• Create corresponding:
  • Actions
  • Reducers
  • Effects
• Update components implementation:
  • speakers.component and talks.component should use ngRx store to retrieve data

Expected output:

• Components should not use services directly, but read data from ngRx store service using subscriptions

Step 3

Goal: Enhance application with delete talk/speaker functionality.

Technical details:

• Add new DELETE button to:
  • speaker-details.component.ts
  • talk-details.component.ts
• Click on DELETE button should:
  • dispatch delete speaker/talk action
  • data in ngRx store should be updated (should not contain deleted speaker/talk)
  • speakers.component/talks.component should reflect updated data (show listings without deleted speaker/talk)

Expected output:

TBD Preview

Bonus

Goal: Enhance application with translations/i18n.

Technical details:

• Create language selector component:
  • generate language-selector.component.ts
• Add language selector to header:
  • update header.component.ts
• Add required dependencies and translation data (en, it)
  • Translations: TBD TABLE

Expected output:

TBD Preview

References

• Typescript
• Angular
• RxJS
• NGRX
• Ngx
• Jasmine
• protractor

Dev Tools

• Augury
• Redux
• NGRX
• Language Service