Setting selector prefix with Angular CLI

If you run this well known Angular CLI command

to create a new angular project, your selector prefix is set to

selector: 'app-root',

If you want to have another name instead of app, like f.e. the company name, you can go to the Angular CLI JSON and changing the prefix from app to companyname.

"prefix": "app",

"prefix": "companyname",

So if you create a new component with CLI, it will get companyname instead of app at the selector.
But this has no effect on the existing components. Of course you can change the name manually. But the best way is, to set the prefix right from the start.

The CLI comand for this is simple but effiktive.

That's all. Have fun at your Angular projects

Comments

Angular 2: Multiple instances in the same Application

Requirement: Use multiple Root-Components in the same Application This Root-Components use the same Implementations and Services Display the Root-Components on the same Single-Page Solution: App-Module preparation: import { BrowserModule, DOCUMENT } from '@angular/platform-browser'; import { NgModule, Inject, Component } from '@angular/core'; export class AppModule { private browser_document; ngDoBootstrap(appRef){ if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);} if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);} } constructor(@Inject(DOCUMENT) private document: any){ this.browser_document = document; } } Service preparation: Angular 2 has two options to provide a service. 1. Single instance For a multiple implementation of more Root-Components we need the second opt...

Nested Component - Passing Data to a Child Component

If you want to pass data to a nested component you have to use the @Import decorator. You can find this decorator at @angular/core import { Input } from '@angular/core' ; Now I show you how you can use this decorator. In my example I want to pass a counter from a Shopping List to a Shopping Basket Component In the end, the shopping basket should look like this: The Shopping Basket shows the number of items in an array (Shopping List). Everytime we put an item in the basket we count the items in the array this . counter = this . selectedProducts . length Now we have to pass the counter to the ShoppingBasketComponent by using property binding < app-shopping-basket [ count ]= "counter" ></ app-shopping-basket > After this we can use the input decorator at the child component export class ShoppingBasketComponent implements OnInit { @ Input () count ...

Typescript: json2ts is a nice helper

Writing interfaces can be annoying. You can save a lot of time when you have to define Typescript interfaces for data that you are loading from a webservice. Instead of typing all the interfaces yourself you can just use a nice service in the web: json2ts Just paste in your json code and it generates the corresponding interfaces in Typescripts. Example JSON: [ { "city": "Berlin", "country": "Germany", "currencies": [{"code":"EUR"}] }, { "city": "Paris", "country": "France", "currencies": [{"code":"EUR"}] } ] Generated code: declare module namespace { export interface Currency { code: string; } export interface RootObject { city: string; country: string; currencies: Currency...

Talk About Code

Search This Blog