Building an application in Angular 5 using Angular Material was a popular decision in 2017-2018 when these technologies were just gaining maturity. Angular 5, released in November 2017, brought support for Progressive Web Apps (PWAs), performance improvements, and optimizations for building projects. Angular Material was an official set of UI components developed according to Google’s Material Design guideline.
To start developing an application, you needed to install the Angular CLI version 1.5 or newer, which fully supported Angular 5. Through the CLI, a new project was created with the command ng new project-name, then Angular Material was added using the command npm install @angular/material @angular/cdk @angular/animations. The CDK (Component Dev Kit) provided the basic functionality for interacting with elements, and animations provided the animations required for many Material components.
Next, the project was customized to use Material design themes. A preconfigured theme from the @angular/material package was plugged into the styles.css or styles.scss file, for example, @import “~@angular/material/prebuilt-themes/indigo-pink.css”. This allowed to immediately apply ready-made styles to components without additional customization.
Importing the required modules took place in the main AppModule module of the application. For example, to use buttons and cards, the MatButtonModule and MatCardModule from @angular/material were connected. An important requirement was also to add the BrowserAnimationsModule to the imports so that the animations would work correctly.
The Angular Material components themselves were built using a declarative model. For example, button creation was done through the Click me element, and cards through . Such components were immediately adaptive and complied with mobile layout standards.
When creating an application, developers often combined Angular Material with modules such as Flex-Layout for fast adaptive meshes without writing their own CSS, and used Angular services to manage the state of the interface. The practice at the time was to create services for working with data, which were embedded into components via Dependency Injection.
To build and run the project, the ng serve command was used, which started the local development server on port 4200. Angular 5 also already supported optimization of production builds through the ng build –prod command, which included code minimization and removal of unused fragments.
Thus, building an application in Angular 5 with Angular Material was based on a clear structure: CLI for project management, Angular Material for the interface, strict typing via TypeScript and modern layout standards. This stack became the foundation for many enterprise and startup applications of its time.