How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • import {
      Inject,
      Injectable,
      InjectionToken,
    } from "@angular/core";
    
    export const BROWSER_STORAGE = new InjectionToken(
      "Browser Storage",
      {
        providedIn: "root",
        factory: () => localStorage,
      }
    );
    
    @Injectable({
      providedIn: "root",
    })
    export class BrowserStorageService {
      constructor(
        @Inject(BROWSER_STORAGE) public storage: Storage
      ) {}
    
      get(key: string) {
        return this.storage.getItem(key);
      }
    
      set(key: string, value: string) {
        this.storage.setItem(key, value);
      }
    
      remove(key: string) {
        this.storage.removeItem(key);
      }
    
      clear() {
        this.storage.clear();
      }
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    
    @Injectable({
      providedIn: "any",
    })
    export class UserService {}
    
    Docs
    0
  • @Injectable({
      providedIn: "root",
    })
    export class DateLoggerService extends LoggerService {
      logInfo(msg: any) {
        super.logInfo(stamp(msg));
      }
      logDebug(msg: any) {
        super.logInfo(stamp(msg));
      }
      logError(msg: any) {
        super.logError(stamp(msg));
      }
    }
    
    function stamp(msg: any) {
      return msg + " at " + new Date();
    }
    
    Docs
    0
  • import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    @Injectable({
      providedIn: 'root'
    })
    export class <%= classify(name) %>Service {
      constructor(private http: HttpClient) { }
    }
    Docs
    0
  • import { Injectable } from "@angular/core";
    
    @Injectable({
      providedIn: "root",
    })
    export class HeroService {
      constructor() {}
    }
    
    Docs
    0
  • @Injectable()
    export class HeroCacheService {
      hero!: Hero;
      constructor(private heroService: HeroService) {}
    
      fetchCachedHero(id: number) {
        if (!this.hero) {
          this.hero = this.heroService.getHeroById(id);
        }
        return this.hero;
      }
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    import { UserModule } from "./user.module";
    
    @Injectable({
      providedIn: UserModule,
    })
    export class UserService {}
    
    Docs
    0
  • @Injectable({ providedIn: "root" })
    export class UniqueAlterEgoValidator
      implements AsyncValidator
    {
      constructor(private heroesService: HeroesService) {}
    
      validate(
        ctrl: AbstractControl
      ):
        | Promise
        | Observable {
        return this.heroesService
          .isAlterEgoTaken(ctrl.value)
          .pipe(
            map((isTaken) =>
              isTaken ? { uniqueAlterEgo: true } : null
            ),
            catchError(() => of(null))
          );
      }
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    
    @Injectable({ providedIn: "root" })
    export class Logger {
      writeCount(count: number) {
        console.warn(count);
      }
    }
    
    Docs
    0
  • @Injectable()
    export class MasterService {
      constructor(private valueService: ValueService) {}
      getValue() {
        return this.valueService.getValue();
      }
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    
    @Injectable({
      providedIn: "root",
    })
    export class UserService {}
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    
    @Injectable({
      providedIn: "root",
    })
    export class CartService {
      constructor() {}
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    import { HEROES } from "./mock-heroes";
    import { Logger } from "../logger.service";
    
    @Injectable({
      providedIn: "root",
    })
    export class HeroService {
      constructor(private logger: Logger) {}
    
      getHeroes() {
        this.logger.log("Getting heroes ...");
        return HEROES;
      }
    }
    
    Docs
    0
  • import { Injectable } from "@angular/core";
    import { HEROES } from "./mock-heroes";
    
    @Injectable({
      // declares that this service should be created
      // by the root application injector.
      providedIn: "root",
    })
    export class HeroService {
      getHeroes() {
        return HEROES;
      }
    }
    
    Docs
    0
  • import {
      Inject,
      Injectable,
      InjectionToken,
    } from "@angular/core";
    
    export const BROWSER_STORAGE = new InjectionToken(
      "Browser Storage",
      {
        providedIn: "root",
        factory: () => localStorage,
      }
    );
    
    @Injectable({
      providedIn: "root",
    })
    export class BrowserStorageService {
      constructor(
        @Inject(BROWSER_STORAGE) public storage: Storage
      ) {}
    
      get(key: string) {
        return this.storage.getItem(key);
      }
    
      set(key: string, value: string) {
        this.storage.setItem(key, value);
      }
    
      remove(key: string) {
        this.storage.removeItem(key);
      }
    
      clear() {
        this.storage.clear();
      }
    }
    
    Docs
    0
  • import { Component, Inject } from "@angular/core";
    
    import { DateLoggerService } from "./date-logger.service";
    import { Hero } from "./hero";
    import { HeroService } from "./hero.service";
    import { LoggerService } from "./logger.service";
    import { MinimalLogger } from "./minimal-logger.service";
    import { RUNNERS_UP, runnersUpFactory } from "./runners-up";
    
    @Component({
      selector: "app-hero-of-the-month",
      templateUrl: "./hero-of-the-month.component.html",
      providers: [
        { provide: Hero, useValue: someHero },
        { provide: TITLE, useValue: "Hero of the Month" },
        { provide: HeroService, useClass: HeroService },
        { provide: LoggerService, useClass: DateLoggerService },
        { provide: MinimalLogger, useExisting: LoggerService },
        {
          provide: RUNNERS_UP,
          useFactory: runnersUpFactory(2),
          deps: [Hero, HeroService],
        },
      ],
    })
    export class HeroOfTheMonthComponent {
      logs: string[] = [];
    
      constructor(
        logger: MinimalLogger,
        public heroOfTheMonth: Hero,
        @Inject(RUNNERS_UP) public runnersUp: string,
        @Inject(TITLE) public title: string
      ) {
        this.logs = logger.logs;
        logger.logInfo("starting up");
      }
    }
    
    Docs
    0
  • import {
      Inject,
      Injectable,
      InjectionToken,
    } from "@angular/core";
    
    export const BROWSER_STORAGE = new InjectionToken(
      "Browser Storage",
      {
        providedIn: "root",
        factory: () => localStorage,
      }
    );
    
    @Injectable({
      providedIn: "root",
    })
    export class BrowserStorageService {
      constructor(
        @Inject(BROWSER_STORAGE) public storage: Storage
      ) {}
    
      get(key: string) {
        return this.storage.getItem(key);
      }
    
      set(key: string, value: string) {
        this.storage.setItem(key, value);
      }
    
      remove(key: string) {
        this.storage.removeItem(key);
      }
    
      clear() {
        this.storage.clear();
      }
    }
    
    Docs
    0
  • import { InjectionToken } from "@angular/core";
    
    export const TITLE = new InjectionToken("title");
    
    Docs
    0
  • @Component({
      selector: "app-root",
      templateUrl: "app.component.html",
      styleUrls: ["app.component.css"],
      animations: [
        slideInAnimation,
        // animation triggers go here
      ],
    })
    export class AppComponent {
      @HostBinding("@.disabled")
      public animationsDisabled = false;
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { FormBuilder } from "@angular/forms";
    
    @Component({
      selector: "app-profile-editor",
      templateUrl: "./profile-editor.component.html",
      styleUrls: ["./profile-editor.component.css"],
    })
    export class ProfileEditorComponent {
      profileForm = this.fb.group({
        firstName: [""],
        lastName: [""],
        address: this.fb.group({
          street: [""],
          city: [""],
          state: [""],
          zip: [""],
        }),
      });
    
      constructor(private fb: FormBuilder) {}
    }
    
    Docs
    0
  • const template = "
    {{hero.name}}
    "; @Component({ selector: "app-hero", template: template, }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-shipping",
      templateUrl: "./shipping.component.html",
      styleUrls: ["./shipping.component.css"],
    })
    export class ShippingComponent {
      constructor() {}
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero-list",
      templateUrl: "./hero-list.component.html",
      providers: [HeroService],
    })
    export class HeroListComponent implements OnInit {
      /* . . . */
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero-of-the-month",
      templateUrl: "./hero-of-the-month.component.html",
      // TODO: move this aliasing, `useExisting` provider to the AppModule
      providers: [
        { provide: MinimalLogger, useExisting: LoggerService },
      ],
    })
    export class HeroOfTheMonthComponent {
      logs: string[] = [];
      constructor(logger: MinimalLogger) {
        logger.logInfo("starting up");
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { FormGroup, FormControl } from "@angular/forms";
    
    @Component({
      selector: "app-profile-editor",
      templateUrl: "./profile-editor.component.html",
      styleUrls: ["./profile-editor.component.css"],
    })
    export class ProfileEditorComponent {
      profileForm = new FormGroup({
        firstName: new FormControl(""),
        lastName: new FormControl(""),
      });
    }
    
    Docs
    0
  • @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css'],
      animations: [
        slideInAnimation
        // animation triggers go here
      ]
    })
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-cart",
      templateUrl: "./cart.component.html",
      styleUrls: ["./cart.component.css"],
    })
    export class CartComponent {
      constructor() {}
    }
    
    Docs
    0
  • import { Attribute, Component } from "@angular/core";
    
    @Component({
      selector: "app-my-input-with-attribute-decorator",
      template: "

    The type of the input is: {{ type }}

    ", }) export class MyInputWithAttributeDecoratorComponent { constructor(@Attribute("type") public type: string) {} }
    Docs
    0
  • import { Component, Input } from "@angular/core";
    
    import { AdComponent } from "./ad.component";
    
    @Component({
      template: `
        

    {{ data.headline }}

    {{ data.body }}
    `, }) export class HeroJobAdComponent implements AdComponent { @Input() data: any; }
    Docs
    0
  • const template = "
    {{hero.name}}
    "; @Component({ selector: "app-hero", template: template + "
    {{hero.title}}
    ", }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • // BAD CODE - title is private
    @Component({
      selector: "app-root",
      template: "

    {{title}}

    ", }) export class AppComponent { private title = "My App"; // Bad }
    Docs
    0
  • @Component({
      selector: "my-component",
      template:
        ' {{person.name}} lives on {{address.street}} ',
    })
    class MyComponent {
      person?: Person;
      address?: Address;
    
      setData(person: Person, address: Address) {
        this.person = person;
        this.address = address;
      }
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero-bios-and-contacts",
      template: ` 
          
        
        
          
        
        
          
        `,
      providers: [HeroService],
    })
    export class HeroBiosAndContactsComponent {
      constructor(logger: LoggerService) {
        logger.logInfo("Creating HeroBiosAndContactsComponent");
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    @Component({
      selector: "hello-world-bindings",
      templateUrl: "./hello-world-bindings.component.html",
    })
    export class HelloWorldBindingsComponent {
      fontColor = "blue";
      sayHelloId = 1;
      canClick = false;
      message = "Hello, World";
      sayMessage() {
        alert(this.message);
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    @Component({
      template: `
        

    About

    Quote of the day:

    `, }) export class AboutComponent {}
    Docs
    0
  • @Component({
      selector: "async-observable-pipe",
      template: `
    observable|async: Time: {{ time | async }}
    `, }) export class AsyncObservablePipeComponent { time = new Observable((observer) => { setInterval( () => observer.next(new Date().toString()), 1000 ); }); }
    Docs
    0
  • @Component({
      selector: "my-component",
      template:
        ' {{person.name}} lives on {{address!.street}} ',
    })
    class MyComponent {
      person?: Person;
      address?: Address;
    
      setData(person: Person, address: Address) {
        this.person = person;
        this.address = address;
      }
    }
    
    Docs
    0
  • @Component({
      selector: "app-sorted-heroes",
      template: `
    {{ hero.name }}
    `, providers: [HeroService], }) export class SortedHeroesComponent extends HeroesBaseComponent { constructor(heroService: HeroService) { super(heroService); } protected afterGetHeroes() { this.heroes = this.heroes.sort((h1, h2) => { return h1.name < h2.name ? -1 : h1.name > h2.name ? 1 : 0; }); } }
    Docs
    0
  • import { Router, NavigationStart } from "@angular/router";
    import { filter } from "rxjs/operators";
    
    @Component({
      selector: "app-routable",
      template: "Routable1Component template",
    })
    export class Routable1Component implements OnInit {
      navStart: Observable;
    
      constructor(router: Router) {
        // Create a new Observable that publishes only the NavigationStart event
        this.navStart = router.events.pipe(
          filter((evt) => evt instanceof NavigationStart)
        ) as Observable;
      }
    
      ngOnInit() {
        this.navStart.subscribe(() =>
          console.log("Navigation Started!")
        );
      }
    }
    
    Docs
    0
  • export type Loaded = { type: "loaded"; data: T };
    export type Loading = { type: "loading" };
    export type LoadingState = Loaded | Loading;
    export class IfLoadedDirective {
      @Input("ifLoaded") set state(state: LoadingState) {}
      static ngTemplateGuard_state(
        dir: IfLoadedDirective,
        expr: LoadingState
      ): expr is Loaded {
        return true;
      }
    }
    
    export interface Person {
      name: string;
    }
    
    @Component({
      template: `
    {{ state.data }}
    `, }) export class AppComponent { state: LoadingState; }
    Docs
    0
  • import { Component } from "@angular/core";
    
    import { Observable, interval } from "rxjs";
    import { map, take } from "rxjs/operators";
    
    @Component({
      selector: "app-hero-async-message",
      template: ` 

    Async Hero Message and AsyncPipe

    Message: {{ message$ | async }}

    `, }) export class HeroAsyncMessageComponent { message$: Observable; private messages = [ "You are my hero!", "You are the best hero!", "Will you be my hero?", ]; constructor() { this.message$ = this.getResendObservable(); } resend() { this.message$ = this.getResendObservable(); } private getResendObservable() { return interval(500).pipe( map((i) => this.messages[i]), take(this.messages.length) ); } }
    Docs
    0
  • @Component({
      selector: 'app-movie-list',
      templateUrl: './movie-list.component.html',
      styleUrls: [ './movie-list.component.css' ],
    })
    Docs
    0
  • import { FormGroup } from "@angular/forms";
    
    @Component({
      selector: "my-component",
      template: "MyComponent Template",
    })
    export class MyComponent implements OnInit {
      nameChangeLog: string[] = [];
      heroForm!: FormGroup;
    
      ngOnInit() {
        this.logNameChange();
      }
      logNameChange() {
        const nameControl = this.heroForm.get("name");
        nameControl?.valueChanges.forEach((value: string) =>
          this.nameChangeLog.push(value)
        );
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { FormControl } from "@angular/forms";
    
    @Component({
      selector: "app-name-editor",
      templateUrl: "./name-editor.component.html",
      styleUrls: ["./name-editor.component.css"],
    })
    export class NameEditorComponent {
      name = new FormControl("");
    }
    
    Docs
    0
  • @Component({
      selector: "app-open-close",
      animations: [
        trigger("openClose", [
          // ...
        ]),
      ],
      templateUrl: "open-close.component.html",
      styleUrls: ["open-close.component.css"],
    })
    export class OpenCloseComponent {
      onAnimationEvent(event: AnimationEvent) {}
    }
    
    Docs
    0
  • @Component({
      template: `
        

    Hello, {{ customer }}

    • {{ customer.value }}
    `, }) class AppComponent { customers = [{ value: "Ebony" }, { value: "Chiho" }]; customer = "Padma"; }
    Docs
    0
  • @Component({
    /* . . . */
      providers: [UserService]
    })
    Docs
    0
  • @Component({
      selector: "app-no-encapsulation",
      template: `
        

    None

    No encapsulation
    `, styles: ["h2, .none-message { color: red; }"], encapsulation: ViewEncapsulation.None, }) export class NoEncapsulationComponent {}
    Docs
    0
  • @Component({
      selector: "my-component",
      template:
        ' {{person.addresss.street}} ',
    })
    class MyComponent {
      person?: Person;
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { FormGroup, FormControl } from "@angular/forms";
    
    @Component({
      selector: "app-profile-editor",
      templateUrl: "./profile-editor.component.html",
      styleUrls: ["./profile-editor.component.css"],
    })
    export class ProfileEditorComponent {
      profileForm = new FormGroup({
        firstName: new FormControl(""),
        lastName: new FormControl(""),
        address: new FormGroup({
          street: new FormControl(""),
          city: new FormControl(""),
          state: new FormControl(""),
          zip: new FormControl(""),
        }),
      });
    }
    
    Docs
    0
  • @Component({
      selector: "app-unsorted-heroes",
      template: `
    {{ hero.name }}
    `, providers: [HeroService], }) export class HeroesBaseComponent implements OnInit { constructor(private heroService: HeroService) {} heroes: Hero[] = []; ngOnInit() { this.heroes = this.heroService.getAllHeroes(); this.afterGetHeroes(); } // Post-process heroes in derived class override. protected afterGetHeroes() {} }
    Docs
    0
  • import { Component, OnInit } from "@angular/core";
    
    @Component({
      selector: "app-heroes",
      templateUrl: "./heroes.component.html",
      styleUrls: ["./heroes.component.css"],
    })
    export class HeroesComponent implements OnInit {
      constructor() {}
    
      ngOnInit() {}
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero-contact",
      template: ` 
    Phone #: {{ phoneNumber }} !!!
    `, }) export class HeroContactComponent { hasLogger = false; constructor( @Host() // limit to the host component's instance of the HeroCacheService private heroCache: HeroCacheService, @Host() // limit search for logger; hides the application-wide logger @Optional() // ok if the logger doesn't exist private loggerService?: LoggerService ) { if (loggerService) { this.hasLogger = true; loggerService.logInfo( "HeroContactComponent can log!" ); } } get phoneNumber() { return this.heroCache.hero.phone; } }
    Docs
    0
  • import {
      Component,
      EventEmitter,
      HostBinding,
      Input,
      Output,
    } from "@angular/core";
    import {
      animate,
      state,
      style,
      transition,
      trigger,
    } from "@angular/animations";
    
    @Component({
      selector: "my-popup",
      template: `
        Popup: {{ message }}
        
      `,
      animations: [
        trigger("state", [
          state(
            "opened",
            style({ transform: "translateY(0%)" })
          ),
          state(
            "void, closed",
            style({ transform: "translateY(100%)", opacity: 0 })
          ),
          transition("* => *", animate("100ms ease-in")),
        ]),
      ],
      styles: [
        `
          :host {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #009cff;
            height: 48px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid black;
            font-size: 24px;
          }
    
          button {
            border-radius: 50%;
          }
        `,
      ],
    })
    export class PopupComponent {
      @HostBinding("@state")
      state: "opened" | "closed" = "closed";
    
      @Input()
      get message(): string {
        return this._message;
      }
      set message(message: string) {
        this._message = message;
        this.state = "opened";
      }
      private _message = "";
    
      @Output()
      closed = new EventEmitter();
    }
    
    Docs
    0
  • import { Component, OnInit, Input } from "@angular/core";
    import { Hero } from "../hero";
    
    @Component({
      selector: "app-hero-detail",
      templateUrl: "./hero-detail.component.html",
      styleUrls: ["./hero-detail.component.css"],
    })
    export class HeroDetailComponent implements OnInit {
      @Input() hero?: Hero;
    
      constructor() {}
    
      ngOnInit() {}
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-zippy-multislot",
      template: `
        

    Multi-slot content projection

    Default: Question: `, }) export class ZippyMultislotComponent {}
    Docs
    0
  • @Component({
      selector: "app-hero-bios",
      template: ` 
        
        `,
      providers: [HeroService],
    })
    export class HeroBiosComponent {}
    
    Docs
    0
  • @Component({
      selector: "app-nav-bar",
      template: ` `,
    })
    export class NavBarComponent {
      navStyle = "font-size: 1.2rem; color: cornflowerblue;";
      linkStyle = "underline";
      activeLinkStyle = "overline";
      /* . . . */
    }
    
    Docs
    0
  • import { Component, Inject } from "@angular/core";
    
    import { DateLoggerService } from "./date-logger.service";
    import { Hero } from "./hero";
    import { HeroService } from "./hero.service";
    import { LoggerService } from "./logger.service";
    import { MinimalLogger } from "./minimal-logger.service";
    import { RUNNERS_UP, runnersUpFactory } from "./runners-up";
    
    @Component({
      selector: "app-hero-of-the-month",
      templateUrl: "./hero-of-the-month.component.html",
      providers: [
        { provide: Hero, useValue: someHero },
        { provide: TITLE, useValue: "Hero of the Month" },
        { provide: HeroService, useClass: HeroService },
        { provide: LoggerService, useClass: DateLoggerService },
        { provide: MinimalLogger, useExisting: LoggerService },
        {
          provide: RUNNERS_UP,
          useFactory: runnersUpFactory(2),
          deps: [Hero, HeroService],
        },
      ],
    })
    export class HeroOfTheMonthComponent {
      logs: string[] = [];
    
      constructor(
        logger: MinimalLogger,
        public heroOfTheMonth: Hero,
        @Inject(RUNNERS_UP) public runnersUp: string,
        @Inject(TITLE) public title: string
      ) {
        this.logs = logger.logs;
        logger.logInfo("starting up");
      }
    }
    
    Docs
    0
  • @Component({
      template: ` 

    Something Yellow

    The Default (Gray)

    No Highlight

    `, }) class TestComponent {}
    Docs
    0
  • @Component({
      selector: "app-shadow-dom-encapsulation",
      template: `
        

    ShadowDom

    Shadow DOM encapsulation
    `, styles: ["h2, .shadow-message { color: blue; }"], encapsulation: ViewEncapsulation.ShadowDom, }) export class ShadowDomEncapsulationComponent {}
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-power-boost-calculator",
      template: `
        

    Power Boost Calculator

    Super Hero Power: {{ power | exponentialStrength: factor }}

    `, styles: ["input {margin: .5rem 0;}"], }) export class PowerBoostCalculatorComponent { power = 5; factor = 1; }
    Docs
    0
  • import { Component } from "@angular/core";
    import { FormBuilder } from "@angular/forms";
    
    import { CartService } from "../cart.service";
    
    @Component({
      selector: "app-cart",
      templateUrl: "./cart.component.html",
      styleUrls: ["./cart.component.css"],
    })
    export class CartComponent {
      items = this.cartService.getItems();
      checkoutForm = this.formBuilder.group({
        name: "",
        address: "",
      });
      constructor(
        private cartService: CartService,
        private formBuilder: FormBuilder
      ) {}
    
      onSubmit(): void {
        // Process checkout data here
        this.items = this.cartService.clearCart();
        console.warn(
          "Your order has been submitted",
          this.checkoutForm.value
        );
        this.checkoutForm.reset();
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    @Component({
      selector: "hello-world-ngif",
      templateUrl: "./hello-world-ngif.component.html",
    })
    export class HelloWorldNgIfComponent {
      message = "I'm read only!";
      canEdit = false;
      onEditClick() {
        this.canEdit = !this.canEdit;
        if (this.canEdit) {
          this.message = "You can edit me!";
        } else {
          this.message = "I'm read only!";
        }
      }
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero-bio",
      template: ` 

    {{ hero.name }}

    `, providers: [HeroCacheService], }) export class HeroBioComponent implements OnInit { @Input() heroId = 0; constructor(private heroCache: HeroCacheService) {} ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); } get hero() { return this.heroCache.hero; } }
    Docs
    0
  • @Component({
      animations: [
        trigger("filterAnimation", [
          transition(":enter, * => 0, * => -1", []),
          transition(":increment", [
            query(
              ":enter",
              [
                style({ opacity: 0, width: "0px" }),
                stagger(50, [
                  animate(
                    "300ms ease-out",
                    style({ opacity: 1, width: "*" })
                  ),
                ]),
              ],
              { optional: true }
            ),
          ]),
          transition(":decrement", [
            query(":leave", [
              stagger(50, [
                animate(
                  "300ms ease-out",
                  style({ opacity: 0, width: "0px" })
                ),
              ]),
            ]),
          ]),
        ]),
      ],
    })
    export class HeroListPageComponent implements OnInit {
      heroTotal = -1;
    }
    
    Docs
    0
  • @Component({
      selector: 'app-typical',
      template: '
    A typical component for {{data.name}}
    ' }) export class TypicalComponent { @Input() data: TypicalData; constructor(private someService: SomeService) { ... } }
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "hello-world-interpolation",
      templateUrl: "./hello-world-interpolation.component.html",
    })
    export class HelloWorldInterpolationComponent {
      message = "Hello, World!";
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-parent",
      template: "",
    })
    export class ParentComponent {}
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { Observable } from "rxjs";
    
    @Component({
      selector: "app-stopwatch",
      templateUrl: "./stopwatch.component.html",
    })
    export class StopwatchComponent {
      stopwatchValue = 0;
      stopwatchValue$!: Observable;
    
      start() {
        this.stopwatchValue$.subscribe(
          (num) => (this.stopwatchValue = num)
        );
      }
    }
    
    Docs
    0
  • import { ActivatedRoute } from "@angular/router";
    
    @Component({
      selector: "app-routable",
      template: "Routable2Component template",
    })
    export class Routable2Component implements OnInit {
      constructor(private activatedRoute: ActivatedRoute) {}
    
      ngOnInit() {
        this.activatedRoute.url.subscribe((url) =>
          console.log("The URL changed to: " + url)
        );
      }
    }
    
    Docs
    0
  • @Component({
      selector: "app-hero",
      template: "
    {{hero.name}}
    ", }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "hello-world",
      template: `
        

    Hello World

    This is my first component!

    `, }) export class HelloWorldComponent { // The code in this class drives the component's behavior. }
    Docs
    0
  • import { Component } from "@angular/core";
    import { ParentComponent } from "./parent.component";
    
    @Component({
      selector: "app-child",
      template: "The child!",
    })
    export class ChildComponent {
      constructor(private parent: ParentComponent) {}
    }
    
    Docs
    0
  • import {
      Component,
      OnInit,
      Self,
      SkipSelf,
    } from "@angular/core";
    import {
      BROWSER_STORAGE,
      BrowserStorageService,
    } from "./storage.service";
    
    @Component({
      selector: "app-storage",
      template: `
        Open the inspector to see the local/session storage
        keys:
    
        

    Session Storage

    Local Storage

    `, providers: [ BrowserStorageService, { provide: BROWSER_STORAGE, useFactory: () => sessionStorage, }, ], }) export class StorageComponent implements OnInit { constructor( @Self() private sessionStorageService: BrowserStorageService, @SkipSelf() private localStorageService: BrowserStorageService ) {} ngOnInit() {} setSession() { this.sessionStorageService.set( "hero", "Dr Nice - Session" ); } setLocal() { this.localStorageService.set("hero", "Dr Nice - Local"); } }
    Docs
    0
  • import { Component } from "@angular/core";
    
    @Component({
      selector: "app-zippy-basic",
      template: `
        

    Single-slot content projection

    `, }) export class ZippyBasicComponent {}
    Docs
    0
  • import { Component } from "@angular/core";
    
    import { Hero } from "../hero";
    
    @Component({
      selector: "app-hero-form",
      templateUrl: "./hero-form.component.html",
      styleUrls: ["./hero-form.component.css"],
    })
    export class HeroFormComponent {
      powers = [
        "Really Smart",
        "Super Flexible",
        "Super Hot",
        "Weather Changer",
      ];
    
      model = new Hero(
        18,
        "Dr IQ",
        this.powers[0],
        "Chuck Overstreet"
      );
    
      submitted = false;
    
      onSubmit() {
        this.submitted = true;
      }
    
      newHero() {
        this.model = new Hero(42, "", "");
      }
    }
    
    Docs
    0
  • import { Component } from "@angular/core";
    import { Logger } from "../logger.service";
    
    @Component({
      selector: "hello-world-di",
      templateUrl: "./hello-world-di.component.html",
    })
    export class HelloWorldDependencyInjectionComponent {
      count = 0;
    
      constructor(private logger: Logger) {}
    
      onLogMe() {
        this.logger.writeCount(this.count);
        this.count++;
      }
    }
    
    Docs
    0
  • @Component({
      selector: "my-component",
      template: "{{person.addresss.street}}",
    })
    class MyComponent {
      person?: Person;
    }
    
    Docs
    0
  • @Component({
      selector: "app-zippy",
      template: `
        
    Toggle
    `, }) export class ZippyComponent { visible = true; @Output() open = new EventEmitter(); @Output() close = new EventEmitter(); toggle() { this.visible = !this.visible; if (this.visible) { this.open.emit(null); } else { this.close.emit(null); } } }
    Docs
    0
  • import { Component, OnInit } from "@angular/core";
    import { Hero } from "../hero";
    
    @Component({
      selector: "app-heroes",
      templateUrl: "./heroes.component.html",
      styleUrls: ["./heroes.component.css"],
    })
    export class HeroesComponent implements OnInit {
      hero: Hero = {
        id: 1,
        name: "Windstorm",
      };
    
      constructor() {}
    
      ngOnInit() {}
    }
    
    Docs
    0
  • @Component({
      selector: "app-emulated-encapsulation",
      template: `
        

    Emulated

    Emulated encapsulation
    `, styles: ["h2, .emulated-message { color: green; }"], encapsulation: ViewEncapsulation.Emulated, }) export class EmulatedEncapsulationComponent {}
    Docs
    0
  • import { Component } from "@angular/core";
    
    import { Hero } from "../hero";
    
    @Component({
      selector: "app-hero-form",
      templateUrl: "./hero-form.component.html",
      styleUrls: ["./hero-form.component.css"],
    })
    export class HeroFormComponent {
      powers = [
        "Really Smart",
        "Super Flexible",
        "Super Hot",
        "Weather Changer",
      ];
    
      model = new Hero(
        18,
        "Dr IQ",
        this.powers[0],
        "Chuck Overstreet"
      );
    
      submitted = false;
    
      onSubmit() {
        this.submitted = true;
      }
    }
    
    Docs
    0
  • const handler = jest.fn();
    
    const {
      container: { firstChild: input },
    } = render();
    
    fireEvent.input(input, { target: { value: "a" } });
    
    expect(handler).toHaveBeenCalledTimes(1);
    
    Docs
    0
  • const ref = createRef();
    const spy = jest.fn();
    
    render(
      h(elementType, {
        onDblClick: spy,
        ref,
      })
    );
    
    fireEvent["onDblClick"](ref.current);
    
    expect(spy).toHaveBeenCalledTimes(1);
    
    Docs
    0
  • const { getByLabelText, queryAllByTestId } =
      render(Component);
    
    Docs
    0
  • // With options.
    const { results } = render(YourComponent, {
      target: MyTarget,
      props: { myProp: "value" },
    });
    
    // Props only.
    const { results } = render(YourComponent, {
      myProp: "value",
    });
    
    Docs
    0
  • const cb = jest.fn();
    
    
    function Counter() {
      useEffect(cb);
    
    
      const [count, setCount] = useState(0);
    
    
      return ;
    }
    
    
    const { container: { firstChild: buttonNode }, } = render();
    
    
    // Clear the first call to useEffect that the initial render triggers.
    cb.mockClear();
    
    
    // Fire event Option 1.
    fireEvent.click(buttonNode);
    
    
    // Fire event Option 2.
    fireEvent(
    buttonNode,
    new Event('MouseEvent', {
      bubbles: true,
      cancelable: true,
      button: 0,
    });
    
    
    expect(buttonNode).toHaveTextContent('1');
    expect(cb).toHaveBeenCalledTimes(1);
    Docs
    0
  • const table = document.createElement("table");
    
    const { container } = render(TableBody, {
      props,
      container: document.body.appendChild(table),
    });
    
    Docs
    0
  • const { getByDataCy } = render();
    
    expect(getByDataCy("my-component")).toHaveTextContent(
      "Hello"
    );
    
    Docs
    0
  • test("has correct welcome text", () => {
      render();
      expect(screen.getByRole("heading")).toHaveTextContent(
        "Welcome, John Doe"
      );
    });
    
    Docs
    0
  • render();
    
    Docs
    0
  • test("handles click correctly", () => {
      render();
    
      userEvent.click(screen.getByText("Check"));
      expect(screen.getByLabelText("Check")).toBeChecked();
    });
    
    Docs
    0
  • // Example, a function to traverse table contents
    import * as tableQueries from "my-table-query-library";
    import { queries } from "@testing-library/react";
    
    const { getByRowColumn, getByText } = render(, {
      queries: { ...queries, ...tableQueries },
    });
    
    Docs
    0
  • test("has correct input value", () => {
      render();
      expect(screen.getByRole("form")).toHaveFormValues({
        firstName: "John",
        lastName: "Doe",
      });
    });
    
    Docs
    0
  • const table = document.createElement("table");
    
    const { container } = render(, {
      container: document.body.appendChild(table),
    });
    
    Docs
    0
  • // @testing-library/react
    const { container } = render();
    const foo = container.querySelector('[data-foo="bar"]');
    
    Docs
    0
  • const { getByLabelText, queryAllByTestId } = render(
      
    );
    
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples