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

  • ▼ ƒ TemplateRef()
    name: "TemplateRef"
    __proto__: Function
    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 template = "
    {{hero.name}}
    "; @Component({ selector: "app-hero", template: template, }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • @Input() set appUnless(condition: boolean) {
      if (!condition && !this.hasView) {
        this.viewContainer.createEmbeddedView(this.templateRef);
        this.hasView = true;
      } else if (condition && this.hasView) {
        this.viewContainer.clear();
        this.hasView = false;
      }
    }
    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
  • export class StoutItemComponent {
      @Input() item!: Item;
    }
    
    Docs
    0
  • const template = "
    {{hero.name}}
    "; @Component({ selector: "app-hero", template: template + "
    {{hero.title}}
    ", }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • import { Component, Input } from "@angular/core"; // First, import Input
    export class ItemDetailComponent {
      @Input() item = ""; // decorate the property with @Input()
    }
    
    Docs
    0
  • @Directive({
      selector: "[appForbiddenName]",
      providers: [
        {
          provide: NG_VALIDATORS,
          useExisting: ForbiddenValidatorDirective,
          multi: true,
        },
      ],
    })
    export class ForbiddenValidatorDirective
      implements Validator
    {
      @Input("appForbiddenName") forbiddenName = "";
    
      validate(
        control: AbstractControl
      ): ValidationErrors | null {
        return this.forbiddenName
          ? forbiddenNameValidator(
              new RegExp(this.forbiddenName, "i")
            )(control)
          : null;
      }
    }
    
    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 {
      Directive,
      ElementRef,
      Input,
      OnChanges,
    } from "@angular/core";
    
    @Directive({ selector: "[highlight]" })
    /**
     * Set backgroundColor for the attached element to highlight color
     * and set the element's customProperty to true
     */
    export class HighlightDirective implements OnChanges {
      defaultColor = "rgb(211, 211, 211)"; // lightgray
    
      @Input("highlight") bgColor = "";
    
      constructor(private el: ElementRef) {
        el.nativeElement.style.customProperty = true;
      }
    
      ngOnChanges() {
        this.el.nativeElement.style.backgroundColor =
          this.bgColor || this.defaultColor;
      }
    }
    
    Docs
    0
  • import {
      Directive,
      ElementRef,
      HostListener,
      Input,
    } from "@angular/core";
    
    @Directive({
      selector: "[appHighlight]",
    })
    export class HighlightDirective {
      @Input("appHighlight") highlightColor = "";
    
      private el: HTMLElement;
    
      constructor(el: ElementRef) {
        this.el = el.nativeElement;
      }
    
      @HostListener("mouseenter") onMouseEnter() {
        this.highlight(this.highlightColor || "cyan");
      }
    
      @HostListener("mouseleave") onMouseLeave() {
        this.highlight("");
      }
    
      private highlight(color: string) {
        this.el.style.backgroundColor = color;
      }
    }
    
    Docs
    0
  • @Input() appHighlight = '';
    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
  • export class SizerComponent {
      @Input() size!: number | string;
      @Output() sizeChange = new EventEmitter();
    
      dec() {
        this.resize(-1);
      }
      inc() {
        this.resize(+1);
      }
    
      resize(delta: number) {
        this.size = Math.min(
          40,
          Math.max(8, +this.size + delta)
        );
        this.sizeChange.emit(this.size);
      }
    }
    
    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({
      selector: 'app-typical',
      template: '
    A typical component for {{data.name}}
    ' }) export class TypicalComponent { @Input() data: TypicalData; constructor(private someService: SomeService) { ... } }
    Docs
    0
  • @Input() hero?: Hero;
    Docs
    0
  • @Component({
      selector: "app-hero",
      template: "
    {{hero.name}}
    ", }) export class HeroComponent { @Input() hero: Hero; }
    Docs
    0
  • export class AdBannerComponent
      implements OnInit, OnDestroy
    {
      @Input() ads: AdItem[] = [];
      currentAdIndex = -1;
      @ViewChild(AdDirective, { static: true })
      adHost!: AdDirective;
      interval: number | undefined;
    
      constructor(
        private componentFactoryResolver: ComponentFactoryResolver
      ) {}
    
      ngOnInit() {
        this.loadComponent();
        this.getAds();
      }
    
      ngOnDestroy() {
        clearInterval(this.interval);
      }
    
      loadComponent() {
        this.currentAdIndex =
          (this.currentAdIndex + 1) % this.ads.length;
        const adItem = this.ads[this.currentAdIndex];
    
        const componentFactory =
          this.componentFactoryResolver.resolveComponentFactory(
            adItem.component
          );
    
        const viewContainerRef = this.adHost.viewContainerRef;
        viewContainerRef.clear();
    
        const componentRef =
          viewContainerRef.createComponent(
            componentFactory
          );
        componentRef.instance.data = adItem.data;
      }
    
      getAds() {
        this.interval = setInterval(() => {
          this.loadComponent();
        }, 3000);
      }
    }
    
    Docs
    0
  • @Input() defaultColor = '';
    Docs
    0
  • @Component(...)
    class MyDialog {
      @Input() content: string;
    }
    Docs
    0
  • import {
      Directive,
      Input,
      TemplateRef,
      ViewContainerRef,
    } from "@angular/core";
    
    /**
     * Add the template content to the DOM unless the condition is true.
     */
    @Directive({ selector: "[appUnless]" })
    export class UnlessDirective {
      private hasView = false;
    
      constructor(
        private templateRef: TemplateRef,
        private viewContainer: ViewContainerRef
      ) {}
    
      @Input() set appUnless(condition: boolean) {
        if (!condition && !this.hasView) {
          this.viewContainer.createEmbeddedView(
            this.templateRef
          );
          this.hasView = true;
        } else if (condition && this.hasView) {
          this.viewContainer.clear();
          this.hasView = false;
        }
      }
    }
    
    Docs
    0
  • export class AdBannerComponent
      implements OnInit, OnDestroy
    {
      @Input() ads: AdItem[] = [];
      currentAdIndex = -1;
      @ViewChild(AdDirective, { static: true })
      adHost!: AdDirective;
      interval: number | undefined;
    
      constructor(
        private componentFactoryResolver: ComponentFactoryResolver
      ) {}
    
      ngOnInit() {
        this.loadComponent();
        this.getAds();
      }
    
      ngOnDestroy() {
        clearInterval(this.interval);
      }
    
      loadComponent() {
        this.currentAdIndex =
          (this.currentAdIndex + 1) % this.ads.length;
        const adItem = this.ads[this.currentAdIndex];
    
        const componentFactory =
          this.componentFactoryResolver.resolveComponentFactory(
            adItem.component
          );
    
        const viewContainerRef = this.adHost.viewContainerRef;
        viewContainerRef.clear();
    
        const componentRef =
          viewContainerRef.createComponent(
            componentFactory
          );
        componentRef.instance.data = adItem.data;
      }
    
      getAds() {
        this.interval = setInterval(() => {
          this.loadComponent();
        }, 3000);
      }
    }
    
    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
  • export class ItemOutputComponent {
      @Output() newItemEvent = new EventEmitter();
    
      addNewItem(value: string) {
        this.newItemEvent.emit(value);
      }
    }
    
    Docs
    0
  • export class SizerComponent {
      @Input() size!: number | string;
      @Output() sizeChange = new EventEmitter();
    
      dec() {
        this.resize(-1);
      }
      inc() {
        this.resize(+1);
      }
    
      resize(delta: number) {
        this.size = Math.min(
          40,
          Math.max(8, +this.size + delta)
        );
        this.sizeChange.emit(this.size);
      }
    }
    
    Docs
    0
  • @Output() newItemEvent = new EventEmitter();
    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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples