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 {
      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
  • @Directive({
      selector: "[appHighlight]",
    })
    export class HighlightDirective {
      constructor(private el: ElementRef) {}
    
      @HostListener("mouseenter") onMouseEnter() {
        this.highlight("yellow");
      }
    
      @HostListener("mouseleave") onMouseLeave() {
        this.highlight("");
      }
    
      private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
      }
    }
    
    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
  • @HostListener('mouseenter') onMouseEnter() {
      this.highlight('yellow');
    }
    
    @HostListener('mouseleave') onMouseLeave() {
      this.highlight('');
    }
    
    private highlight(color: string) {
      this.el.nativeElement.style.backgroundColor = color;
    }
    Docs
    0
  • @HostListener('mouseenter') onMouseEnter() {
      this.highlight(this.highlightColor || this.defaultColor || 'red');
    }
    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
  • 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
  • import { render, fireEvent } from "@testing-library/vue";
    import Component from "./Component.vue";
    
    test("properly handles v-model", async () => {
      const { getByLabelText, getByText } = render(Component);
    
      // Asserts initial state.
      getByText("Hi, my name is Alice");
    
      // Get the input DOM node by querying the associated label.
      const usernameInput = getByLabelText(/username/i);
    
      // Updates the  value and triggers an `input` event.
      // fireEvent.input() would make the test fail.
      await fireEvent.update(usernameInput, "Bob");
    
      getByText("Hi, my name is Bob");
    });
    
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples