All Projects → fetis → 30-seconds-of-angular

fetis / 30-seconds-of-angular

Licence: CC0-1.0 license
Curated collection of Angular snippets that you can understand in 30 seconds or less

Programming Languages

javascript
184084 projects - #8 most used programming language
Handlebars
879 projects
CSS
56736 projects

Projects that are alternatives of or similar to 30-seconds-of-angular

30-seconds-of-csharp
Short C# code snippets for all your development needs
Stars: ✭ 132 (+450%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30-seconds-of-git
Short git snippets for all your development needs
Stars: ✭ 235 (+879.17%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30 Seconds Of Css
Short CSS code snippets for all your development needs
Stars: ✭ 14,945 (+62170.83%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30 Seconds Of React
Short React code snippets for all your development needs
Stars: ✭ 3,991 (+16529.17%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30-seconds-of-python
Short Python code snippets for all your development needs
Stars: ✭ 8,452 (+35116.67%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30 Seconds Of Code
Short JavaScript code snippets for all your development needs
Stars: ✭ 89,121 (+371237.5%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30 Seconds Of Php
Short PHP code snippets for all your development needs
Stars: ✭ 2,461 (+10154.17%)
Mutual labels:  snippets, programming, learn-to-code, snippets-collection, learning-resources
30 Seconds Of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
Stars: ✭ 9,410 (+39108.33%)
Mutual labels:  snippets, learn-to-code, snippets-collection, learning-resources
30 Seconds Of Angular
[WIP] Curated collection of Angular snippets that you can understand in 30 seconds or less
Stars: ✭ 221 (+820.83%)
Mutual labels:  snippets, programming, learn-to-code
code-examples
Short code snippets written by our open source community!
Stars: ✭ 60 (+150%)
Mutual labels:  snippets, programming, snippets-collection
30-seconds-of-code-texteditorsnippets
Files to import the 30-seconds-of-code snippets into VSCode, Atom and Sublime.
Stars: ✭ 35 (+45.83%)
Mutual labels:  snippets, snippets-collection, learning-resources
Solang
First fully featured programming language for Stack Overflow Driven Development
Stars: ✭ 133 (+454.17%)
Mutual labels:  snippets, programming
Beginners C Program Examples
Simple, Short and Sweet beginners friendly C language programs
Stars: ✭ 138 (+475%)
Mutual labels:  snippets, programming
Java Design Patterns
Design patterns implemented in Java
Stars: ✭ 71,923 (+299579.17%)
Mutual labels:  snippets, snippets-collection
30 Seconds Of Java
Curated collection of useful little Java functions that you can understand quickly
Stars: ✭ 872 (+3533.33%)
Mutual labels:  snippets, learn-to-code
30-seconds-blog
Code articles for all your development needs
Stars: ✭ 566 (+2258.33%)
Mutual labels:  snippets, learn-to-code
Snippet2
A simple Code Snippet with user account and share feature
Stars: ✭ 20 (-16.67%)
Mutual labels:  snippets, snippets-collection
10secondsofcode
The team behind 10-seconds-of-code and official 10-seconds projects.
Stars: ✭ 41 (+70.83%)
Mutual labels:  learn-to-code, snippets-collection
gms-sample-library
👑 A library with demo projects to learn Game Maker Studio and Game Maker Language (GML)
Stars: ✭ 22 (-8.33%)
Mutual labels:  programming, learn-to-code
30 Seconds Of Swift Code
A Swift implementation of 30-seconds-of-code: A curated collection of useful Swift 4 snippets that you can understand in 30 seconds or less.
Stars: ✭ 476 (+1883.33%)
Mutual labels:  snippets, learn-to-code

Logo 30 Seconds of Angular

Build Status PRs Welcome

Curated collection of useful Angular snippets that you can understand in 30 seconds or less.

  • Use Ctrl + F or command + F to search for a snippet.
  • Snippets are written in Angular 8+.

30 Seconds of Angular

Table of contents

Beginner snippets

Intermediate snippets

Advanced snippets

Beginner snippets

Accessing Enums in template

Enums are great but they are not visible in Angular templates by default. With this little trick you can make them accessible.

enum Animals {
  DOG,
  CAT,
  DOLPHIN
}

@Component({
  ...
})
export class AppComponent {
  animalsEnum: typeof Animals = Animals;
}


Interactive demo of this snippet | Back to top | tags: enums templates

Cheat Sheets and Checklists

Check out Angular Cheat Sheet or (alternative version) containing lots of useful information condensed in one place.

Also Angular Checklist contains is curated list of common mistakes made when developing Angular applications.

Links

https://malcoded.com/angular-cheat-sheet/,https://angular.io/guide/cheatsheet,https://angular.io/guide/styleguide


Interactive demo of this snippet | Back to top | tags: tip cheat sheet

Component State Debugging

Debug the component state in the browser console by running:

ng.probe($0).componentInstance

$0 - is the DOM node currently selected in dev tools ($1 for the previous one and so on).

Bonus

With Ivy renderer engine:

ng.getComponent($0)

Links

https://blog.angularindepth.com/everything-you-need-to-know-about-debugging-angular-applications-d308ed8a51b4


Interactive demo of this snippet | Back to top | tags: good-to-know tips

Default ViewEncapsulation value

If you're using ViewEncapsulation value which is different than default, it might be daunting to set the value manually for every component.

Luckily you can configure it globally when bootstrapping your app:

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
    // NOTE: Use ViewEncapsulation.None only if you know what you're doing.
    defaultEncapsulation: ViewEncapsulation.None
  }
]);


Interactive demo of this snippet | Back to top | tags: configuration styling

hammerjs-gestures

To act upon swipes, pans, and pinhces as well as the other mobile gestures, you can use hammerjs with HostListener decorator, or an event binding,

npm install hammerjs
@HostListener('swiperight')
public swiperight(): void {
  // Run code when a user swipes to the right
}
Bonus

Here are samples on how to use all of the hammerjs event bindings, you can use these events with a HostListener as well:

  <!-- pan events -->
  <div (pan)="logEvent($event)"></div>
  <div (panstart)="logEvent($event)"></div>
  <div (panmove)="logEvent($event)"></div>
  <div (panend)="logEvent($event)"></div>
  <div (pancancel)="logEvent($event)"></div>
  <div (panleft)="logEvent($event)"></div>
  <div (panright)="logEvent($event)"></div>
  <div (panup)="logEvent($event)"></div>
  <div (pandown)="logEvent($event)"></div>

  <!-- pinch events -->
  <div (pinch)="logEvent($event)"></div>
  <div (pinchstart)="logEvent($event)"></div>
  <div (pinchmove)="logEvent($event)"></div>
  <div (pinchend)="logEvent($event)"></div>
  <div (pinchcancel)="logEvent($event)"></div>
  <div (pinchin)="logEvent($event)"></div>
  <div (pinchout)="logEvent($event)"></div>

  <!-- press events -->
  <div (press)="logEvent($event)"></div>
  <div (pressup)="logEvent($event)"></div>

  <!-- rotate events -->
  <div (rotate)="logEvent($event)"></div>
  <div (rotatestart)="logEvent($event)"></div>
  <div (rotatemove)="logEvent($event)"></div>
  <div (rotateend)="logEvent($event)"></div>
  <div (rotatecancel)="logEvent($event)"></div>

  <!-- swipe events -->
  <div (swipe)="logEvent($event)"></div>
  <div (swipeleft)="logEvent($event)"></div>
  <div (swiperight)="logEvent($event)"></div>
  <div (swipeup)="logEvent($event)"></div>
  <div (swipedown)="logEvent($event)"></div>

  <!-- tap event -->
  <div (tap)="logEvent($event)"></div>

Links

https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestures.ts,http://hammerjs.github.io/api/#hammer.manager,https://angular.io/api/platform-browser/HammerGestureConfig


Interactive demo of this snippet | Back to top | tags: good-to-know tips components gestures

Loader Component

You can create own helper component and use it instead of *ngIf.

@Component({
  selector: 'loader',
  template: `
    <ng-content *ngIf="!loading else showLoader"></ng-content>
    <ng-template #showLoader>🕚 Wait 10 seconds!</ng-template>
  `
})
class LoaderComponent {
  @Input() loading: boolean;
}

For usage example:

<loader [loading]="isLoading">🦊 🦄 🐉</loader>

Note that the content will be eagerly evaluated, e.g. in the snippet below destroy-the-world will be created before the loading even starts:

<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>

Links

https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b,https://blog.angularindepth.com/https-medium-com-thomasburleson-animated-ghosts-bfc045a51fba


Interactive demo of this snippet | Back to top | tags: tips good-to-know components templates

ng-content

With ng-content you can pass any elements to a component. This simplifies creating reusable components.

@Component({
  selector: 'wrapper',
  template: `
    <div class="wrapper">
      <ng-content></ng-content>
    </div>
  `,
})
export class Wrapper {}
<wrapper>
  <h1>Hello World!</h1>
</wrapper>

Links

https://medium.com/p/96a29d70d11b


Interactive demo of this snippet | Back to top | tags: good-to-know tips components

ngIf else

*ngIf directive also supports else statement.

<div *ngIf="isLoading; else notLoading">loading...</div>

<ng-template #notLoading>not loading</ng-template>


Interactive demo of this snippet | Back to top | tags: ngif templates

Optional parameters in the middle

Navigate with matrix params:

the router will navigate to /first;name=foo/details

<a [routerLink]="['/', 'first', {name: 'foo'}, 'details']">
  link with params
</a>

Links

https://stackblitz.com/edit/angular-xvy5pd


Interactive demo of this snippet | Back to top | tags: routing

Renaming inputs and outputs

In certain cases @Input and @Output properties can be named differently than the actual inputs and outputs.

<div 
  pagination 
  paginationShowFirst="true"
  (paginationPageChanged)="onPageChanged($event)">
</div>
@Directive({ selector: '[pagination]'})
class PaginationComponent {
  @Input('paginationShowFirst') 
  showFirst: boolean = true;

  @Output('paginationPageChanged') 
  pageChanged = new EventEmitter();
}

Note: Use this wisely, see StyleGuide recommedation

Links

https://angular.io/guide/styleguide#style-05-13


Interactive demo of this snippet | Back to top | tags: components templates

Safe Navigation Operator

The Safe Navigation Operator helps with preventing null-reference exceptions in component template expressions. It returns object property value if it exists or null otherwise.

<p> I will work even if student is null or undefined: {{student?.name}} </p>
Bonus
{{a?.b?.c}} 

Underneath will be compiled to.

(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));

Links

angular/angular#791


Interactive demo of this snippet | Back to top | tags: object property handling tips good to know

trackBy in for loops

To avoid the expensive operations, we can help Angular to track which items added or removed i.e. customize the default tracking algorithm by providing a trackBy option to NgForOf.

So you can provide your custom trackBy function that will return unique identifier for each iterated item. For example, some key value of the item. If this key value matches the previous one, then Angular won't detect changes.

trackBy takes a function that has index and item args.

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
    </ul>
  `
})
export class AppComponent { 
  trackByFn(index, item) {
    return item.id;
  }
}

If trackBy is given, Angular tracks changes by the return value of the function.

Now when you change the collection, Angular can track which items have been added or removed according to the unique identifier and create/destroy only changed items.

Links

https://angular.io/api/common/NgForOf,https://angular.io/api/core/TrackByFunction


Interactive demo of this snippet | Back to top | tags: good-to-know tips components performance

Understanding Microsyntax

Under the hood Angular compiles structural directives into ng-template elements, e.g.:

<!-- This -->
<div *ngFor="let item of [1,2,3]">

<!-- Get expanded into this -->
<ng-template ngFor [ngForOf]="[1,2,3]" let-item="$implicit"></ng-template>

The value passed to *ngFor directive is written using microsyntax. You can learn about it in the docs.

Also check out an interactive tool that shows the expansion by Alexey Zuev

Links

https://angular.io/guide/structural-directives#microsyntax,https://alexzuza.github.io/ng-structural-directive-expander/,https://angular.io/guide/structural-directives#inside-ngfor


Interactive demo of this snippet | Back to top | tags: tip structural directive microsyntax

Intermediate snippets

Accessing all nested form controls

Sometimes we need to work with every single Control is a form. Here's how it can be done:

function flattenControls(form: AbstractControl): AbstractControl[] {
  let extracted: AbstractControl[] = [ form ];
  if (form instanceof FormArray || form instanceof FormGroup) {
    const children = Object.values(form.controls).map(flattenControls);
    extracted = extracted.concat(...children);
  }
  return extracted;
}

For examples use:

// returns all dirty abstract controls
flattenControls(form).filter((control) => control.dirty);

// mark all controls as touched
flattenControls(form).forEach((control) => 
    control.markAsTouched({ onlySelf: true }));

Links

https://angular.io/guide/reactive-forms


Interactive demo of this snippet | Back to top | tags: reactive forms tips good to know

Adding keyboard shortcuts to elements

It's really easy to add keyboard shortcuts in the template:

<textarea (keydown.ctrl.enter)="doSomething()"></textarea>
Bonus
<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.shift.esc)="...">
<input (keydown.control)="...">
<input (keydown.alt)="...">
<input (keydown.meta)="...">
<input (keydown.9)="...">
<input (keydown.tab)="...">
<input (keydown.backspace)="...">
<input (keydown.arrowup)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.shift.control.z)="...">
<input (keydown.f4)="...">

Links

https://alligator.io/angular/binding-keyup-keydown-events


Interactive demo of this snippet | Back to top | tags: tips good-to-know

Bind to host properties with host binding

Every rendered angular component is wrapped in a host element (which is the same as component's selector).

It is possible to bind properties and attributes of host element using @HostBinding decorators, e.g.

import { Component, HostBinding } from '@angular/core';

@Component({
   selector: 'my-app', 
   template: `
    <div>Use the input below  to select host background-color:</div>
    <input type="color" [(ngModel)]="color"> 
  `,
  styles: [
    `:host { display: block; height: 100px; }`
  ]
})
export class AppComponent {
  @HostBinding('style.background') color = '#ff9900';
}


Interactive demo of this snippet | Back to top | tags: components

Component level providers

Generally we get one service instance per the whole application. It is also possible to create an instance of service per component or directive.

@Component({
  selector: 'provide',
  template: '<ng-content></ng-content>',
  providers: [ Service ]
})
export class ProvideComponent {}
@Directive({
  selector: '[provide]',
  providers: [ Service ]
})
export class ProvideDirective {}

Links

https://angular.io/guide/hierarchical-dependency-injection#component-level-injectors,https://stackblitz.com/edit/angular-cdk-happy-animals


Interactive demo of this snippet | Back to top | tags: tips components dependency-injection

Global event listeners

It is possible to add global event listeners in your Components/Directives with HostListener. Angular will take care of unsubscribing once your directive is destroyed.

@Directive({
  selector: '[rightClicker]'
})
export class ShortcutsDirective {
  @HostListener('window:keydown.ArrowRight')
  doImportantThings() {
    console.log('You pressed right');
  }
}
Bonus

You can have multiple bindings:

@HostListener('window:keydown.ArrowRight')
@HostListener('window:keydown.PageDown')
next() {
  console.log('Next')
}

You can also pass params:

@HostListener('window:keydown.ArrowRight', '$event.target')
next(target) {
  console.log('Pressed right on this element: ' + target)
}


Interactive demo of this snippet | Back to top | tags: events components

Injecting document

Sometimes you need to get access to global document.

To simplify unit-testing, Angular provides it through dependency injection:

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Edit me </h1>`
})
export class AppComponent {

  constructor(@Inject(DOCUMENT) private document: Document) {
    // Word with document.location, or other things here....
  }
}

Links

https://angular.io/api/common/DOCUMENT


Interactive demo of this snippet | Back to top | tags: dependency injection

Mark reactive fields as touched

Here is the way to notify user that there are fields with non-valid values.

markFieldsAsTouched function FormGroup or FormArray as an argument.

function markFieldsAsTouched(form: AbstractControl): void {
  form.markAsTouched({ onlySelf: true });
  if (form instanceof FormArray || form instanceof FormGroup) {
    Object.values(form.controls).forEach(markFieldsAsTouched);
  }
}
Bonus

It's very useful to check out more general method Accessing all nested form controls by Thekiba to work with controls.

Links

https://angular.io/guide/reactive-forms


Interactive demo of this snippet | Back to top | tags: reactive forms validation tips good to know

Observables as outputs

EventEmitters used for @Output's are just Observables with an emit method.

This means that you can just use Observable instance instead, e.g. we can wire up FormControl value changes directly:

readonly checkbox = new FormControl();
@Output() readonly change = this.checkbox.valueChanges;


Interactive demo of this snippet | Back to top | tags: tip outputs

Passing template as an input

It's possible to take a template as @Input for a component to customize the render

@Component({
  template: `
    <nav>
      <ng-container *ngTemplateOutlet="template"></ng-container>
    </nav>
  `,
})
export class SiteMenuComponent  {
  @Input() template: TemplateRef<any>;
}
<site-menu [template]="menu1"></site-menu>

<ng-template #menu1>
  <div><a href="#">item1</a></div>
  <div><a href="#">item2</a></div>
</ng-template>

Note: ng-content should be used for most of the cases and it's simpler and more declarative. Only use this approach if you need extra flexibility that can't be achieved with ng-content.

Links

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet


Interactive demo of this snippet | Back to top | tags: template

Preseving whitespaces

By default Angular strips all whitespaces in templates to save bytes. Generally it's safe.

For rare cases when you need to preserve spaces you can use special ngPreserveWhitespaces attribute:

<div ngPreserveWhitespaces>
             (___()'`;
             /,    /`
       jgs   \\"--\\
</div>

You can also use preserveWhitespaces option on a component.

Links

https://twitter.com/mgechev/status/1108913389277839360


Interactive demo of this snippet | Back to top | tags: tip

Reusing code in template

While the best way of reusing your code is creating a component, it's also possible to do it in a template.

To do this you can use ng-template along with *ngTemplateOutlet directive.

<p>
  <ng-container *ngTemplateOutlet="fancyGreeting"></ng-container>
</p>

<button>
  <ng-container *ngTemplateOutlet="fancyGreeting"></ng-container>    
</button>

<ng-template #fancyGreeting>
  Hello <b>{{name}}!</b>
</ng-template>

Links

https://angular.io/api/common/NgTemplateOutlet,https://angular.io/guide/structural-directives#the-ng-template


Interactive demo of this snippet | Back to top | tags: templates

Reusing existing custom pipes

If you need a custom pipe, before creating one, consider checking out the NGX Pipes package which has 70+ already implemeted custom pipes.

Here are some examples:

<p>{{ date | timeAgo }}</p> 
<!-- Output: "last week" -->

<p>{{ 'foo bar' | ucfirst }}</p>
<!-- Output: "Foo bar" -->

<p>3 {{ 'Painting' | makePluralString: 3 }}</p>
<!-- Output: "3 Paintings" -->

<p>{{ [1, 2, 3, 1, 2, 3] | max }}</p>
<!-- Output: "3" -->

Links

https://github.com/danrevah/ngx-pipes


Interactive demo of this snippet | Back to top | tags: tip pipes library

Style bindings

You can use advanced property bindings to set specific style values based on component property values:

<p [style.background-color]="'green'">
  I am in green background
</p>

<p [style.font-size.px]="isImportant ? '30' : '16'">
  May be important text.
</p>
Bonus
<!-- Width in pixels -->
<div [style.width.px]="pxWidth"></div>

<!-- Font size in percentage relative to the parent -->
<div [style.font-size.%]="percentageSize">...</div>

<!-- Height relative to the viewport height -->
<div [style.height.vh]="vwHeight"></div>


Interactive demo of this snippet | Back to top | tags: styles

Two-way binding any property

Similar to how you can two-way bind [(ngModel)] you can two-way bind custom property on a component, for example [(value)]. To do it use appropriate Input/Output naming:

@Component({
  selector: 'super-input', 
  template: `...`,
})
export class AppComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
}

Then you can use it as:

<super-input [(value)]="value"></super-input>


Interactive demo of this snippet | Back to top | tags: tip binding

Using APP_INITIALIZER to delay app start

It is possible to execute asynchronous task before the app start by providing a function returning promise using APP_INITIALIZER token.

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useValue:  functionReturningPromise
      multi: true
    },
})
export class AppModule {}

Links

https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e,https://angular.io/api/core/APP_INITIALIZER


Interactive demo of this snippet | Back to top | tags: tip

Window Location injection

For testing purposes you might want to inject window.location object in your component. You can achieve this with custom InjectionToken mechanism provided by Angular.

export const LOCATION_TOKEN = new InjectionToken<Location>('Window location object');

@NgModule({
  providers: [
    { provide: LOCATION_TOKEN, useValue: window.location }
  ]
})
export class SharedModule {}

//...

@Component({
})
export class AppComponent {
  constructor(
    @Inject(LOCATION_TOKEN) public location: Location
  ) {}
}

Links

https://itnext.io/testing-browser-window-location-in-angular-application-e4e8388508ff,https://angular.io/guide/dependency-injection


Interactive demo of this snippet | Back to top | tags: dependency-injection testing

Advanced snippets

Getting components of different types with ViewChild

It's possible to use @ViewChild (also @ViewChildren and @ContentChild/Children) to query for components of different types using dependency injection.

In the example below we can use @ViewChildren(Base) to get instances of Foo and Bar.

abstract class Base {}

@Component({
  selector: 'foo',
  providers: [{ provide: Base, useExisting: Foo }]
})
class Foo extends Base {}

@Component({
  selector: 'bar',
  providers: [{ provide: Base, useExisting: Bar }]
})
class Bar extends Base {}

// Now we can require both types of components using Base.
@Component({ template: `<foo></foo><bar></bar>` })
class AppComponent {
  @ViewChildren(Base) components: QueryList<Base>;
}

Links

https://www.youtube.com/watch?v=PRRgo6F0cjs


Interactive demo of this snippet | Back to top | tags: good-to-know tips components dependency-injection

Router Custom Preloading

Angular allows us to control the way module preloading is handled.

There are 2 strategies provided by @angular/router: PreloadAllModules and NoPreloading. The latter enabled by default, only preloading lazy modules on demand.

We can override this behavior by providing custom preloading strategy: In the example below we preload all included modules if the connection is good.

import { Observable, of } from 'rxjs';

export class CustomPreloading implements PreloadingStrategy {
  public preload(route: Route, load: () => Observable<any>): Observable<any> {
    return preloadingConnection() ? load() : of(null);
  }
}

const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  preloadingStrategy: CustomPreloading
});

Note that that the example above would not be very efficient for larger apps, as it'll preload all the modules.

Links

https://angular.io/api/router/PreloadingStrategy,https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb,https://medium.com/@adrianfaciu/custom-preloading-strategy-for-angular-modules-b3b5c873681a,https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular


Interactive demo of this snippet | Back to top | tags: router

SVG

It is possible to use SVG tags in your Angular component, to create beautiful graphs and visualizations. There are 3 things you need to know:

  1. When binding an SVG attribute, use attr
<circle [attr.cx]="x" [attr.cy]="y"></circle>
  1. When creating sub-components, use attribute and not tag selector:
// Not: <child-component></child-component>
<g child-component></g>
@Component({selector: '[child-component]' })
  1. When using SVG tags in sub-components use svg prefix:
@Component({
  selector: '[child-component]',
  template: `<svg:circle></svg:circle>`
})


Interactive demo of this snippet | Back to top | tags: tip SVG

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].