Interactive Rating Card Component Using Angular and SCSS

Hi @athirasarman,

You did a nice job in completing this challenge with Angular. Below are a few things I have noticed and you might want to check in order to improve your solution.

• When I look at the design of the rating component, I see a form with radio buttons for the different rating values and a submit button. However, the markup of your HowDidWeDoComponent component is using <div> elements etc. While this is actually working, I would strongly recommend you to build your components with elements that are meant for the purpose. Something like this:

<form class="form">
  <div class="form__group">
    <label class="form__label for="rating-1">
      <input id="rating-1" type="radio" class="form__input" value="1" name="rating" />
    </label>

    <label class="form__label for="rating-2">
      <input id="rating-2" type="radio" class="form__input" value="2" name="rating" />
    </label>
  </div>
  <button type="submit" class="form__btn">Submit</button>
</form>

This would be much better in terms of semantics and would be a good opportunity for you to try either a template-driven or reactive form approach with Angular.

• At the moment if a user enters a route that doesn't exist, he gets a blank page. It is a good practice to set up a route to handle such situation. You could do so by setting up wildcard route like this:

app-routing.module.ts (excerpt):

const routes: Routes = [
  {
    path: '',
    component: HowDidWeDoComponent
  },
  {
    path: 'thankyou',
    component: ThankYouComponent
  },
  {
    path: '**',
    component: HowDidWeDoComponent
  }
];

I hope this helps.

Keep it up.