I’m going to cover in this blog

  1. Implementing responsive web design using the Flex Layout library.
  2. Changing the layout based on the viewport size.
  3. Using the Layout Module of Angular Material.

When it comes to developing a web app, you need to decide whether you’ll have separate apps for desktop and mobile versions or reuse the same code on all devices.

Nowadays, Often we choose to use a single base code and implement Responsive Web Design(RWD). So UI Layout will change or adapt according to Screen Size.

To implement RWD, you can use CSS media queries, represented by the @media…

This blog covered

  • Understanding the Angular Forms API.
  • Working with template-driven forms.
  • Working with reactive forms.

A normal HTML form may not be good enough for real-world applications, Where we need a way to programmatically process the entered data, apply custom validation rules, display user-friendly error messages, transform the format of the entered data, and choose the way data is submitted to the server. For business applications, one of the most important considerations when choosing a web framework is how well it handles form.

Let’s introduce you to two Forms APIs: template-driven and reactive.

Template-driven Approach

With the template-driven API, forms are fully programmed in the component’s template using directives, and


Ajay Singh

I'm the Node and Angular Developer, I have been in this Filed 4 years, Have worked in MNC company.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store