Angular

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

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 single form control in the form group is identified by name. Example Let’s head back to practice … Read more

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

Angular FormControl is a built-in class “used to get and set values and validate the form control fields like <input> or <select>.” The FormControl 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 … Read more

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

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

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

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 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. Angular Material Datepicker allows users to enter the date through text input or by choosing the date from the calendar. The Material Datepicker comprises several components and directives that work … Read more

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 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

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

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

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

To use Angular with Laravel, you can create a frontend interface in Angular and create a backend API in Laravel with MySQL or NoSQL databases. We build an Angular Application frontend interface and then call an API to store the data. This is just a basic Item Storage Application using Angular and Laravel. Here is … Read more

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

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

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

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

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

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

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

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

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 for selecting a value … Read more

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

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

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 canachieve it in bothn the component element and the HTML elemenh. The two-way binding uses the … Read more

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

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

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

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

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

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

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

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

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

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

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

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 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

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