An Introduction to Flex Layout and Angular Material

-
Flex Layout

  • What - Flex Layout was announced by the Angular team as a UI layout library that is based on styling and written in pure TypeScript. Originating from CSS Flexbox, it allows users to create responsive page layouts without the use of classes and styling files like css or scss. 
  • When - Flex Layout requires Angular version 4.1^ and works best when paired with Angular Material but it can also be independent. It is mainly a solution for applications that require heavy responsive behaviors, especially desktop and mobile friendly applications as it allows the developer to anticipate the user's screen size by setting breakpoints in which to make the responsive transition.
Flex Layout Installation
Setting up Flex Layout for Angular is as easy as using it. Lets get started!
  • Install - type the following command in your project's command line.
npm install @angular/flex-layout --save
  • Import - import FlexLayoutModule into your app module.
Flex Layout Basic Tutorial
Developing with Flex Layout allows us to focus solely on the html files, which opens the door for benefits such as the ease of debugging.
  • fxLayout - defines the orientation of the elements within the element. If set to column, elements will be displayed from the top of the screen to the bottom. If set to row, elements will be displayed from the left to the right side of the screen. If not specified, fxLayout will default to row. 
column mode

row mode
  • fxFlex - defines the screen real estate percentage in relation to the other elements within the same parent element. If amount is not specified, fxFlex will automatically assign the remaining space, which is 100 - (fxFlex amount of sibling elements).
Third element is automatically assigned an fxFlex of 30
  • fxLayoutGap - defines the amount of space between the child elements. Measurement of the amount can be specified in px, rem, em, %, etc.
A gap of 1 rem is applied between the child elements.
  • fxLayoutAlign - defines the alignment of the child elements. Three main keywords to use are start, center and end. If the fxLayout is set to row, setting fxLayoutAlign to start will align the elements to the left, center will align the elements to the center and end will align the elements to the right side of the screen. The same concept applies when the fxLayout is set to column except setting fxLayoutAlign to start will align the elements to the top, and end will align the elements to the bottom of the screen. 
Elements are placed on the right side of the screen

Angular Material

  • What - Angular Material is a UI component library also developed by the Angular team for Angular developers. The goal of Angular Material coincides with the whole concept of Angular developing, which is to provide the developer with components that can be reused when needed. The components themselves can contain styling features that are unique and appropriate in today's modern tech industry. Similar to Flex Layout, Angular Material provides a responsive experience for the user across different platforms.
  • When - Angular Material is best suited for applications that require a standard theme. With strong support from the Angular team in the form of updates, documentation and examples, you will definitely see a decrease in the time taken to build an entire screen from scratch.
Angular Material Installation
  • Install - type the following command in your project's command line.
npm install @angular/material @angular/cdk @angular/animations --save
  • Update - type the following command to update your Angular project with the appropriate dependencies
ng add @angular/material
  • Angular Material Module - Since it is best practice to only import modules from a library that you need, let's create a angular material folder beside our app folder for the angular material module to house the complete list of necessary modules. Our app module will then import the contents of the angular material module as a way to keep things organized and for the app module to not get cluttered with a huge list of modules.
Angular Material module folder and file
Angular Material module with the imported list of Material modules to use

Angular Material Basic Tutorial
One of the benefits of using Angular Material is that it can be seamlessly integrated with Reactive Forms, but for the sake of this basic tutorial, let's go over some of my favorite components provided by Angular Material.

  • Card - Lets create a card that hovers slightly on top of the screen and since we already have the MatCardModule imported, we can now start off by adding a mat-card element in our html file. One unique feature of implementing Angular Material is that we can even customize the elevation aspect of our element using the built-in elevation classes.
Mat Card with an elevation of  mat-elevation-z-8
  • Button - Building on top of the card, let's add an Angular Material button, remembering to always import the appropriate module as we need them. Built-in features such as is the ability to use color classes(which ensures aesthetic consistency throughout our application), the pulse effect shown when the user clicks the button and the look of the button when it is set as disabled are all things most users expect in a modern application.
Import MatButtonModule

Angular Material buttons using built-in primary class 

Angular Material button set to disabled

Conclusion
We went over a brief introduction and tutorial on implementing both Angular Material and Flex Layout for the sole purpose of understanding the advantages these libraries can offer. From benefits such as being open source and heavily supported, the ease of implementing powerful components that are responsive from desktop to mobile apps, and the short learning curve, you can rest assure that both Angular Material and Flex Layout will offer a rewarding experience when developing from small to even large sized applications. 



Comments

Post a Comment

Popular posts from this blog

Code Quality Assurance - The Best Practices

-
Image
Code Quality Code quality is important, essential and perhaps the most overlooked when it comes to any type of project. Especially in the modern tech industry, code quality has become vital to the performance of the whole application and the overall user experience. It is no longer just about "making it work" anymore. Good code is not only a result of merely keeping it simple or removing unused features, as personal or peer code reviews are the main contributing factors when it comes to ensuring product quality and a collaborative environment between your programmers. Code quality assurance may be difficult as the project capacity increases, so here are some of the top valued practices I've gathered and learned so far in my career that you can implement today for your project's benefit. Peer Review Peer code reviews can often seem unproductive at times, especially in a big project with strict deadlines. However, they are the most effective when the reviewers
Read more

NgRx Store - The Basics

-
Image
Introduction The NgRx Store is a common framework you may come across in a lot of Angular applications, and for good reasons. The main reason is the ability to group, organize and funnel data, which can present many benefits not just for the application itself, but also for the developer. In this post, we will discuss the basic fundamental pieces of the NgRx framework and how we can use it to its full potential. NgRx - State and Accessibility The State is where the state of the application is defined and managed. The Initial State is where we can have the ability to set values that we want our state to start off with, under the type rules that are set in the implemented interface. For complex applications, it allows us to nest one state with even more states, called Feature States , in a sort of parent-child relationship, in order to organize datasets that fall under certain categories. The State is immutable and read-only , and in order for angular components to acces
Read more