How to Check Angular Version using Command Line

To check an Angular version, go inside the recently created Angular project and use the “ng version” command. ng version Output The ng version outputs the Angular CLI version. You can see that I am using Angular CLI version 16.1.6. Besides that, we can see all the library’s versions shipped with Angular and rxjs, typescript, and … Read more

FormGroup in Angular

Angular FormGroup wraps a collection of form controls. Just as the control gives you access to the state of an element, the group gives the same access but to the state of the wrapped controls. When initializing, every form control in the form group is identified by name. We must import the ReactiveFormsModule to work … Read more

How to Use Sass in Angular Application

Angular supports Sass, CSS, and Less to style global applications and component styles. In addition, angular component styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles. Angular Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you … Read more

How to Use FormControl in Angular

Angular FormControl is a built-in class used to get and set values and validate the form control fields like <input> or <select>. It tracks the value and validation status of an individual form control. It can be used standalone as well as with a parent form. FormControl is one of the three fundamental building blocks … Read more

Angular Router Navigate [Step-by-Step Guide]

To navigate different routes, use the Angular router, which provides methods to navigate different routes using routerLink. To navigate from one route to another, we need two Angular components. Each component contains a specific view. Navigation Directive Angular Router supports the routerLink directive to create navigation links. The navigation directive takes the path associated with the … Read more

How to Use Checkbox in Angular [Step-by-Step Guide]

The angular checkbox is a regular checkbox that can be seen as a square box ticked (checked) when activated.  HTML checkboxes let a user select one or more options for a limited number of choices. The <input type=”checkbox”> defines a checkbox in HTML. Here is a step-by-step guide to use the checkbox in Angular. Step … Read more

How to Create Angular Modules to Organize Code

Here is the step-by-step guide to create angular modules to organize code. Step 1: Install Angular ng new angmodules Also, add the Bootstrap using the following command. npm install bootstrap –save Add the bootstrap file inside the angular.json file. “styles”: [ “src/styles.css”, “./node_modules/bootstrap/dist/css/bootstrap.min.css” ], We can use Bootstrap in our application. Step 2: Create a new … Read more

Angular NgClass: How to Add Conditional CSS Classes

The ngClass directive in Angular is “used to add and remove CSS classes on an HTML element.” Angular ngClass Properties Property Description @Input(‘class’) class: string Write-Only @Input() ngClass: string | string[] | Set<string> | { [class: string]: any; } Write-Only You can update the CSS classes based on the type of expression selection. String – … Read more

Angular Material Datepicker [Step-by-Step Guide]

Angular Datepicker is a built-in material component that allows us to enter the date through text input or by choosing the date from a calendar. It allows users to enter the date through text input or by choosing the date from the calendar. It comprises several components and directives that work together. Here is the … Read more

How to Implement Smart Table Component in Angular

Angular Smart table is a module to easily display data in a table with a set of built-in features, such as filtering, sorting, etc., in a declarative way. The smart table in Angular has the following focus points: Angular Smart table is an Angular module to easily display data in a table with a set … Read more

Angular Material Dialog Modal: A Complete Example

Angular Material Modal is a built-in module filled with significant, modern UI components that work across the web, mobile, and desktop applications. The MatDialog service can open modal dialogs with Material Design styling and animations. Here is the step-by-step guide to implement the material dialog modal in Angular. Step 1: Create an Angular Project Type … Read more

Angular 13 CRUD Application Tutorial

Here is the step-by-step guide to create a crud application in Angular: Step 1: Install Angular and other dependencies. If you have an older @angular/cli version, you can run the following command to install the latest versions. npm uninstall -g @angular/cli npm cache verify npm install -g @angular/cli If you type the following command, you … Read more

Angular 14 Observables Tutorial [Step-by-Step Guide]

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. This pattern is similar (but not identical) to the publish/subscribe design pattern. Angular Observables support passing the messages between publishers(Creator of Observables) and subscribers(Users of Observables) in … Read more

How to Use HttpClient in Angular

Angular HttpClient is a built-in module that helps us to send network requests to any server. Angular HttpClientModule sends GET, POST, PUT, PATCH, and DELETE requests. In addition, Angular can consume REST API using the Angular HttpClient module. The HttpClient in @angular/standard/Http offers the simplified client HTTP API for Angular applications that rests on an … Read more

How to Setup Laravel With Angular [Complete Step-by-Step Guide]

Here is the step-by-step guide to setting up Laravel with Angular. Step 1: Set up an Angular Environment. Install Angular CLI globally. So type the following command. npm install -g @angular/cli Type the following command to create a project. ng new ngtutorial Step 2: Create one form to enter the data. Angular is modular. All … Read more

How to Implement Routing and Sub Routing in Angular

Your app needs routing, and angular makes it very easy. Routing means navigating between the pages. You have seen many websites with links that direct you to a new page. This can be achieved using routing. We also see the sub-routing or children routing for our components. That means, in our application, there is one … Read more

Property Binding in Angular

In Angular property binding, we bind a property of a DOM element to a field, a defined property in our component TypeScript code. Angular internally converts string interpolation into property binding. HTML elements have backing dom properties that track the state of elements, for example, textContent. You can use Angular’s property binding syntax to wire into those … Read more

Angular ngOnChanges Lifecycle Hook

The ngOnChanges() is a built-in Angular callback method invoked immediately after the default change detector checks data-bound properties if at least one has changed. Before the view and content, children are checked. Example interface OnChanges { ngOnChanges(changes: SimpleChanges): void } Angular, by default, comes with AppComponent. Therefore, it will act as a parent component. Let’s … Read more

How to Use Reactive Forms in Angular [Step-by-Step Guide]

Angular Reactive Forms or Model-Driven approach is another way to construct forms in Angular. In Angular Reactive Forms, the form is built in the component class. That allows you to have a contract that your form subscribes to field-value changes and ultimately unit-test your form logic without any UI layer. Reactive forms use the explicit and immutable … Read more

What is NgSwitch in Angular [Step-by-step Guide]

Angular ngSwitch directive on the container specifies an expression to match against. The ngSwitchCase directives on views within the container provide the expressions to match. Every view that matches is rendered. The view with a ngSwitchDefault directive is rendered if there are no matches. Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault … Read more

Angular Routing: How to Display a Loading Indicator When Navigating Between Routes

To create a routing loading indicator in Angular, use the Angular router service and ng2-slim-loading-bar on its Github Library. Angular Router service gives us access to an Observable of all navigation events via its events property. We can subscribe to that Observable and act accordingly depending on the type of event. Here are the steps … Read more

Material Checkbox in Angular

Angular material checkbox is a built-in material component that provides the same functionality as a native <input type= “checkbox”> enhanced with Material Design styling and animations. Here is the step-by-step guide to create a material checkbox in Angular. Step 1: Create an Angular project Run the following npm command to create a new project using … Read more

Formatting Dates with Date Pipe in Angular

Angular DatePipe is “used to format dates in angular according to the given date formats, timezone, and country locale information.” For example, using DatePipe, you can convert the Date object, a number (milliseconds from UTC), or an ISO date string according to provided predefined angular date formats or custom angular date formats. DatePipe is introduced … Read more

Angular 14 Material Select Dropdown [Step-by-Step Guide]

To create a material dropdown in Angular, use the <mat-select> form control. Angular material provides <mat-select> form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. To use angular material select, use <mat-select> formControl to select a value … Read more

How to Update Angular CLI to Latest Version

To update Angular CLI to the latest version, use the format ng update @angular/cli@^<major_version> @angular/core@^<major_version> command. You can check your current version of Angular CLI using the following command. ng –version To update the latest angular-cli package installed globally in your system, you need to run the following commands. sudo npm uninstall -g angular-cli // For Mac npm … Read more

Activating Routes with RouterLink in Angular

RouterLink is a built-in Angular Directive that lets you link to specific routes in your app. In the SPA(single-page application), you change what the user sees by showing or hiding portions of the display that correspond to particular components rather than going out to the server to get a new page. As users need to … Read more

How to Use ngModel Directive in Angular

Angular NgModel is a built-in directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data.  We can achieve it in both the component element and the HTML element. The two-way binding uses … Read more

Angular ngStyle Directive with Examples

Angular ngStyle attribute is “used to change or style the multiple properties.” You can change the value, color, size, etc., of the elements. It sets one or more style properties specified as colon-separated key-value pairs. If the evaluation result is null, the corresponding style is removed. Here is the step-by-step guide to use the ngStyle … Read more

Angular File Upload [Step-by-Step Guide]

To upload files in Angular, use the ng2-file-upload library. For managing the uploaded files at the backend, we use the multer library. Multer is a node.js middleware for handling multipart/form-data, primarily for uploading files.  Here is the step-by-step guide to upload a file in Angular. Step 1: Install Angular. npm install -g @angular/cli # or … Read more

How to Validate Angular Template-Driven Forms

Here is the step-by-step guide to validate Angular template-driven forms. Step 1: Create a new Angular project To create an Angular 12 project, you have to install Angular CLI. Type the following command to create a new Angular project. ng new angulartemplate Go inside the folder and install the Bootstrap CSS Framework. npm install bootstrap … Read more

How to Access and Pass Route Parameters in Angular

To access route and query parameters in Angular, use the “ActivatedRoute” service. The ActivatedRoute service provides Observables through which we can subscribe to the values of route params and route query params. In Angular, we can pass the data as route parameters in two ways.  Route params(Route parameters) Route queryParams(Route query parameters) To pass values … Read more

Demystifying Angular Route Guards [Step-by-Step Guide]

Angular route guard allows us to grant or remove access to certain parts of the navigation. Another route guard, the CanDeactivate guard, enables you to prevent a user from accidentally leaving a component with unsaved changes. To prevent unauthorized access to certain parts of our navigation, use route guards in Angular. Client-side route guards like … Read more

Angular Material Radio Button Tutorial with Example

To implement a material radio button in Angular, you can use the “<mat-radio-button>” component. The <mat-radio-button> component provides the same functionality as a native <input type=”radio”> enhanced with Material Design styling and animations. Radio-button label The radio-button label is provided as the content of the <mat-radio-button> element. The label can be positioned before or after … Read more

Angular 8 CRUD Application example with Node.js API

Here is the step-by-step guide to create a crud application in Angular. Step 1: Create an Angular 8 project Install the Bootstrap 4 CSS Framework using the following command. It is not a necessary step, and you can also choose your CSS Framework. npm install bootstrap –save Add it inside an angular.json file. “styles”: [ “src/styles.css”, “./node_modules/bootstrap/dist/css/bootstrap.min.css” ], … Read more

Displaying Data in Views in Angular [Step-by-Step Guide]

Combining data values with their representation on the page is called data binding. You display your data to a user (and collect data from the user) by binding controls in the HTML template to the data properties of the component class. Here is the step-by-step guide to display data in views. Step 1: Install the Angular Application If … Read more

How to Implement Material Icons in Angular [Step-by-Step Guide]

Angular Material library has a wide variety of components that we can use. One such component is <mat-icon>. The <mat-icon> component makes using vector-based icons in your angular app easier. To use Material icons in Angular, use the <mat-icon> component. The <mat-icon> directive supports icon fonts and SVG icons but not bitmap-based formats. Icons are necessary … Read more

How to Implement Drag and Drop in Angular

To create a Drag and drop functionality in Angular, use “DragDropModule” in the Angular Material library. Here is the step-by-step guide that implements drag-and-drop functionality. Step 1: Install the Angular project and Angular Material Library ng new ang9drag Go into the project folder and open the project inside the visual studio code. Install the hammerjs using the following command. … Read more

State Management in Angular Using NGXS [Step-by-Step Guide]

NGXS is a state management pattern for the Angular framework. NGXS is a single source of truth for your application’s state, providing simple rules for predictable state mutations. The concept is similar to a Redux library mainly used in React applications. You can not directly change the state; you must commit the action and then … Read more

Angular 6 CRUD: How to Create MEAN Stack Application

Here are the steps to create a crud application in Angular 6. Step 1: Create an Angular 6 Project. ng new ng6crud Go into the project folder. cd ng6crud Start the Angular 6 application using the following command. ng serve –open It compiles and opens up the browser at this URL: http://localhost:4200 Step 2: Install Bootstrap 4. … Read more

Angular State Management Made Simple with NgRx

Angular NgRx Store is a client-side data management pattern used in large applications. The Ngrx/Store implements the Redux pattern using RxJS observables of Angular. The ngrx/store builds on the concepts made famous by Redux and supercharges it with the backing of RxJS.  Redux Redux is a predictable state container for JavaScript applications. Redux following the Unidirectional … Read more

How to Integrate Admin Template in Angular

Here is the step-by-step guide to integrating the admin template in Angular. Step: 1 If you are in Windows, open your CMD in Administrator mode and type the following command. npm install -g @angular/cli If you are on a Mac or Linux, type the following command. sudo npm install -g @angular/cli It will take some time to … Read more