Build Better Modern Web Experiences, Faster with Angular Components

Material is an open-source design system created by Google designed for apps targeting the Web, Android, iOS or Flutter. Based on components that back up the design system, developers have a starting point to build out the user interface of their apps. Infragistics Ignite UI for Angular is built on top of the Material design system. Angular Material include guides, specifications, and examples for:

• Layout
• Navigation
• Color
• Typography
• Sound
• Iconography
• Shape
• Motion
• Interaction

Like any good design system, Angular Material is meant to be adaptable. It is a system of guidelines, components, and tools that support the best practices of user interface design.

An Angular component, a subset of an Angular Directive, is the foundational building block of the user interface (UI) that makes up an Angular app. In an Angular app, a hierarchical tree of Angular components describes the user interface and encapsulates every aspect of the application that a user sees and interacts with in their browser. Angular components include things like Templates, Styles, Animations, Change Detection, Providers, Injectable Views, and more.

When you create an Angular component, there are three files:

1. A TypeScript class called the component class
2. An HTML file called the template of the component
3. An optional CSS file for the styling of the component

When an Angular app loads in your browser, you are looking at a “View” in Angular. That “View” is made up of one or more Angular components (usually more than one). In the Angular application, as a user navigates pages, or interacts with different components in the view, the Angular framework takes care of creating, updating, or destroying components. The component itself can respond to those events occurring in the application lifecycle, letting the developer write code that reacts to events in the component’s lifecycle.

Learn more about Angular components at https://angular.io/api/core/Component.

You can use an Angular CLI command to generate a component using this command:

ng generate component Product

This command will generate ProductComponent as shown below:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { constructor() { } ngOnInit() { }

A component is a class decorated with the @Component decorator.

There are four steps to create a component:

1. Create a class and export it. This class will contain data and the logic.
2. Decorate the class with @component metadata. Metadata describes the component and sets the value for different properties.
3. Import the required libraries and modules to create the component.
4. Create a template of the component and optionally the style of the component.

As you can see, the generated ProductComponent consists of:

• A class to hold data and the logic.
• HTML template and styles to display data in the app. It is also called a view and is seen by the user on the screen to interact.
• Metadata that defines the behavior of a component.

Component metadata is applied to the class using the @Component decorator. Different behavior of the component can be passed as properties of the object, which is an input parameter of the @Component decorator.

A command line interface in Angular is a tool launched from a Command Window (Terminal on Mac, or Command Prompt / PowerShell in Windows, or a Terminal Window in Visual Studio Code.

To install the Angular CLI, make sure you have NodeJS installed from https://nodejs.org/en/download/. Once installed, open a Command Window and type:

npm install -g @angular/cli

Using a the Angular CLI (Command Line Interface), you can use templates using Angular Schematics from different commands that will generate all or a part of an application. The Angular CLI from the Google team is the fastest way to generate the structure and dependencies of an Angular application. A schematic is a template-based code generator which includes instructions and logic to add or modify code from a code generation process.

The Ignite UI CLI from Infragistics goes a step further than the Angular CLI. While still based on templates using Angular Schematics, the Ignite UI CLI can add user interface components like Charts, Data Grids, and even entire application scenarios to a new or existing Angular application. You can even create your own custom templates based on your team or business need to accelerate app development and generate code in seconds.

To get started with step-by-step instructions using the Angular CLI and the Ignite UI CLI, click here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Angular Directives create DOM elements and change their structure or behavior in an Angular application. There are three types of directives in Angular:

1. Components: Directives with templates.
2. Attribute Directives: Change appearance and behavior of an element, component, or other directive.
3. Structural Directives: Change DOM layout by adding or removing elements.

The basic difference between an Angular component and an Angular directive is that a component has a template, whereas an attribute or structural directive does not have a template. Angular has provided us many inbuilt structural and attribute directives.

• Inbuilt structural directives are *ngFor and *ngIf.
• Attribute directives are NgStyle and NgModel.

The architecture of an Angular application has many parts that work together to deliver an Angular app to the browser. Here is a brief overview of the architecture involved and the building blocks of an Angular application.

• NgModules: Declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a related set of capabilities.
• Components: Defines a class that contains application data and logic and works with an HTML template that defines a view.
• Template: Combines HTML with Angular markup that can modify HTML elements before they're displayed.
• Directive: Attaches custom behavior to elements in the DOM.
• Two-way data binding: Coordinates the parts of a template with the parts of a component.
• Services: Typically, a class used to increase modularity and reusability with a narrow and well-defined purpose.
• Dependency injection: Provides components with needed services and gives access to a service class.
• Routing: Defines a navigation path among the different application states lets you view application hierarchies.

Ignite UI for Angular is a complete set of Material-based UI widgets, Angular components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWA’s) targeting Google's Angular framework.

Ignite UI for Angular is a complete library of user interface (UI) components for building data-rich and responsive web apps in Angular, including 100+ data charts, grids, and components.

Ignite UI for Angular is licensed via a subscription model. A single developer license starts at $750.00 USD for a one-year subscription, including one year of standard support and updates. We also offer discounts for multi-year licenses. Please refer to our Pricing page for more information on pricing.

The best place to begin is with our Getting Started Documentation.

The team at Infragistics maintains a comprehensive library of code samples. We also maintain a library of sample applications.