Top 5 Easy Ways to Customize Angular Syntax

From Angular Press Kit

Angular is a most powerful high-level framework. Also, there are lots of default-defined syntaxes. But sometimes default syntax may not always fit every project

In this story, we’ll explore how to change Angular’s interpolation, directive prefixes, component selectors, event bindings, and pipes to create a custom experience.

1. Changing Interpolation Syntax ({{ }})

Angular uses double curly braces {{ }} for data binding. But did you know you can change these to something else?

You can change the interpolation symbols within the @Component decorator.

let’s change {{}} to [[]]

@Component({
  selector: 'app-root',
  template: `<h1>Welcome [[ username ]]!</h1>`,
  interpolation: ['[[', ']]']
})
export class AppComponent {
  username = 'MythicCoder';
}

2. Changing Component Selectors (app-)

By default, Angular generates components with the app- prefix (app-header, app-footer). You can customize this to better match your project structure.

You can customize the prefix for your Angular component selectors by editing the angular.json file. Find the "@schematics/angular:component" configuration within the schematics section…