Posts

Showing posts with the label angular 17 features

Observables & Promises in Angular 17 - Standalone - UI/UX

Observables and Promises :                Observables and Promises are both used for handling asynchronous operations in JavaScript, but they have different approaches and use cases.  Promises :                Promises were introduced in ES6 (ECMAScript 2015) and provide a way to handle asynchronous operations in a more structured and composable manner than traditional callback functions. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises have a few advantages over callbacks: They provide a cleaner and more readable syntax. They can be chained together using .then() and .catch() methods. They handle errors more effectively with the .catch() method. Observables :                 Observables, on the other other hand, are part of the RxJS (Reactive Extensions for JavaScript) li...

String pipe | Standalone | Angular 17

Image
 Do you know how to use String pipe in Angular 17 ?          Pipes are basically used to change the format of the content we are displaying , in this there are different kinds of pipes are there. One of the type is String Pipe in this string we creating our own format for displaying the content ( i.e, user-name, menu-name etc,. ).  Here the steps to create our own String Pipe Angular 17 : Step 1 : Create a file in the format of your-file-name.pipe.ts in  src/app of your project. Step 2 : Create your own formatter's are use the example given below.  import { Pipe , PipeTransform } from '@angular/core' @ Pipe ({     name : 'string' ,     standalone : true }) export class StringPipe implements PipeTransform {     transform ( value : string , operation : string ) : string {         switch ( operation ) {           case 'uppercase' :       ...

Component Communication in Angular 17 - Frontend Development

Component Communication :           Component communication refers to the ability of different components in an Angular application to share information and communicate with each other . Effective communication between components helps in maintaining modularity , separation of concerns, and clean architecture throughout the development process. Various techniques exist to establish communication channels between components in Angular, including Input and Output properties, services, and observables. Various techniques : Input and Output Properties. Services. Observables. Input Properties :   Parent Component HTML file :    Syntax :           <child-selector-name [child @input property name] = "parent-variable-name">                     </child-selector-name> <h1>Parent Component </h1> <child-component [parentProperty] = "...

How to Data Bind in Angular 17 - Frontend - A Expert Frontend Developer Must Knew it

Data Binding :                  Data binding in Angular refers to the automatic synchronization of data between the model (component) and the view (template). It allows you to establish a connection between the DOM and the component's properties or methods . There are four types of data binding in Angular: Types of Data Binding : 1. Interpolation ({{ }}): It binds data from the component to the view, displaying component properties in the HTML template. 2. Property Binding ([ ]): It binds data from the component to the DOM properties or attributes, allowing you to set properties dynamically. 3. Event Binding (( )): It binds events from the DOM to the component, allowing you to handle user events like click, input, etc., in the component. 4. Two-Way Data Binding ([( )]): It combines property binding and event binding, allowing data to flow both from the component to the view and from the view to the component, providing a seaml...