Generate components in angular, usefull commands<\/p>\n\n\n\n
ng g component <name>\nng g c<\/code><\/pre>\n\n\n\nng g directive <name>\nng g d<\/code><\/pre>\n\n\n\nng g guard <name>\nng g g<\/code><\/pre>\n\n\n\nng g interceptor <name><\/code><\/pre>\n\n\n\nng g module <name>\nng g m<\/code><\/pre>\n\n\n\nng g pipe <name>\nng g p<\/code><\/pre>\n\n\n\nng g service <name>\nng g s<\/code><\/pre>\n\n\n\nList of some commonly used Angular pipes<\/h2>\n\n\n\n
Angular provides a variety of built-in pipes that you can use to transform and format data in your templates. Here’s a list of some commonly used Angular pipes, along with examples of how to use them:<\/p>\n\n\n\n
\n- DatePipe:<\/strong> Formats a date object into a string representation based on the provided format.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying the current date in a specific format -->\n {{ today | date: 'dd\/MM\/yyyy' }}<\/code><\/pre>\n\n\n\n\n- UpperCasePipe:<\/strong> Converts a string to all uppercase letters.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Converting a string to uppercase -->\n {{ 'Hello, Angular' | uppercase }}<\/code><\/pre>\n\n\n\n\n- LowerCasePipe:<\/strong> Converts a string to all lowercase letters.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Converting a string to lowercase -->\n {{ 'Hello, Angular' | lowercase }}<\/code><\/pre>\n\n\n\n\n- CurrencyPipe:<\/strong> Formats a number as currency, with options for specifying the currency code and formatting.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying a number as currency -->\n {{ price | currency: 'USD':true }}<\/code><\/pre>\n\n\n\n\n- DecimalPipe:<\/strong> Formats a number as a decimal with options for specifying the number of digits and decimal places.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying a number with 2 decimal places -->\n {{ value | number: '1.2-2' }}<\/code><\/pre>\n\n\n\n\n- PercentPipe:<\/strong> Formats a number as a percentage.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying a number as a percentage -->\n {{ fraction | percent }}<\/code><\/pre>\n\n\n\n\n- JsonPipe:<\/strong> Converts a JavaScript object into a JSON string.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying a JSON object as a string -->\n {{ data | json }}<\/code><\/pre>\n\n\n\n\n- AsyncPipe:<\/strong> Handles observables and promises and automatically subscribes\/unsubscribes in the template.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying the value of an observable -->\n {{ observableData | async }}<\/code><\/pre>\n\n\n\n\n- SlicePipe:<\/strong> Extracts a portion of an array or string.<\/li>\n<\/ol>\n\n\n\n
<!-- Example: Displaying the first 3 items of an array -->\n {{ arrayData | slice:0:3 }}<\/code><\/pre>\n\n\n\n\n- TitleCasePipe:<\/strong> Converts a string to title case (the first letter of each word is capitalized).
<!-- Example: Converting a string to title case --> {{ 'hello world' | titlecase }}<\/code>
<\/li>\n\n\n\n- I18nPluralPipe:<\/strong> Selects an output string according to the pluralization rules for a given locale.
<!-- Example: Selecting a pluralized string based on a count --> {{ itemCount | i18nPlural: { '=0': 'No items', '=1': 'One item', 'other': '# items' } }}<\/code>
<\/li>\n\n\n\n- I18nSelectPipe:<\/strong> Selects an output string based on a mapping of input values to output strings for a given locale.
<!-- Example: Selecting an output string based on an input value --> {{ status | i18nSelect: { 'in-progress': 'Work in progress', 'completed': 'Task completed', 'pending': 'Task pending' } }}<\/code><\/li>\n<\/ol>\n\n\n\n<\/p>\n\n\n\n
Custom pipes can also be created if specific data transformation needs that are not covered by the built-in pipes. <\/p>\n\n\n\n
Custom pipes allows to encapsulate and reuse data formatting logic in your Angular application.<\/p>\n\n\n\n
List of Angular directives<\/p>\n\n\n\n
Angular provides a variety of built-in directives that you can use to extend HTML and add dynamic behavior to your templates. Here’s a list of some commonly used Angular directives with examples:<\/p>\n\n\n\n
\n- ngIf:<\/strong> Conditionally renders an element based on a boolean expression.<\/li>\n<\/ol>\n\n\n\n
<div *ngIf=\"isUserLoggedIn\">Welcome, User!<\/div><\/code><\/pre>\n\n\n\n\n- ngFor:<\/strong> Iterates over a collection and generates HTML for each item.<\/li>\n<\/ol>\n\n\n\n
<ul>\n <li *ngFor=\"let item of items\">{{ item }}<\/li>\n <\/ul><\/code><\/pre>\n\n\n\n\n- ngSwitch:<\/strong> Conditionally renders content based on matching cases.<\/li>\n<\/ol>\n\n\n\n
<div [ngSwitch]=\"userRole\">\n <div *ngSwitchCase=\"'admin'\">Admin Dashboard<\/div>\n <div *ngSwitchCase=\"'user'\">User Dashboard<\/div>\n <div *ngSwitchDefault>Guest Dashboard<\/div>\n <\/div><\/code><\/pre>\n\n\n\n\n- ngClass:<\/strong> Adds or removes CSS classes based on conditions.<\/li>\n<\/ol>\n\n\n\n
<div [ngClass]=\"{ 'active': isActive, 'disabled': isDisabled }\">Clickable Element<\/div><\/code><\/pre>\n\n\n\n\n- ngStyle:<\/strong> Sets inline styles based on expressions.<\/li>\n<\/ol>\n\n\n\n
<div [ngStyle]=\"{ 'font-size.px': fontSize, 'color': fontColor }\">Styled Text<\/div><\/code><\/pre>\n\n\n\n\n- ngModel:<\/strong> Two-way data binding for form elements.<\/li>\n<\/ol>\n\n\n\n
<input [(ngModel)]=\"userName\" placeholder=\"Enter your name\"><\/code><\/pre>\n\n\n\n\n- ngIfElse:<\/strong> Provides an alternative template when ngIf condition is false.<\/li>\n<\/ol>\n\n\n\n
<div *ngIf=\"isUserLoggedIn; else notLoggedIn\">Welcome, User!<\/div>\n <ng-template #notLoggedIn>Please log in to access the content.<\/ng-template><\/code><\/pre>\n\n\n\n\n- ngTemplateOutlet:<\/strong> Renders the content of a named template.<\/li>\n<\/ol>\n\n\n\n
<ng-container *ngTemplateOutlet=\"myTemplate\"><\/ng-container>\n <ng-template #myTemplate><p>This is a custom template.<\/p><\/ng-template><\/code><\/pre>\n\n\n\n\n- ng-container:<\/strong> A structural directive used for grouping elements without introducing an extra HTML element.<\/li>\n<\/ol>\n\n\n\n
<ng-container *ngFor=\"let item of items\">\n <div>{{ item }}<\/div>\n <\/ng-container><\/code><\/pre>\n\n\n\n\n- ngDisable:<\/strong> Disables or enables an element based on a condition. <\/li>\n<\/ol>\n\n\n\n
<button [disabled]=\"isButtonDisabled\">Click me<\/button><\/code><\/pre>\n\n\n\n\n- ngSubmit:<\/strong> Used in forms to handle form submission. <\/li>\n<\/ol>\n\n\n\n
<form (ngSubmit)=\"onFormSubmit()\"> <!-- Form inputs go here --> <button type=\"submit\">Submit<\/button> <\/form><\/code><\/pre>\n\n\n\nAngular also allows to create custom directives to extend HTML behavior.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Generate components in angular, usefull commands List of some commonly used Angular pipes Angular provides a variety of built-in pipes that you can use to transform and format data in your templates. Here’s a list of some commonly used Angular pipes, along with examples of how to use them: Custom pipes can also be created […]<\/p>\n","protected":false},"author":1,"featured_media":458,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,101],"tags":[102,106,103,104,105],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/570"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=570"}],"version-history":[{"count":9,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"predecessor-version":[{"id":585,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions\/585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/458"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}