Posts

Showing posts with the label angular 17

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