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 { Attribute, Component } from '@angular/core';
    
    @Component({
      selector: 'app-my-input-with-attribute-decorator',
      template: '<p>The type of the input is: {{ type }}</p>'
    })
    export class MyInputWithAttributeDecoratorComponent {
      constructor(@Attribute('type') public type: string) { }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Attribute</span> <span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Attribute<span class="token operator">:</span> AttributeDecorator <span class="token keyword">import</span> Attribute</code><div class="typing-tooltip-markup">Type of the Attribute metadata. Attribute decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>
    Docs
    1
  • @Component({
      selector: 'my-component',
      template: '{{person.addresss.street}}'
    })
    class MyComponent {
      person?: Person;
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-power-boost-calculator',
      template: `
        <h2>Power Boost Calculator</h2>
        <label for="power-input">Normal power: </label>
        <input id="power-input" type="text" [(ngModel)]="power">
        <label for="boost-input">Boost factor: </label>
        <input id="boost-input" type="text" [(ngModel)]="factor">
        <p>
          Super Hero Power: {{power | exponentialStrength: factor}}
        </p>
      `,
      styles: ['input {margin: .5rem 0;}']
    })
    export class PowerBoostCalculatorComponent {
      power = 5;
      factor = 1;
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Component</span> <span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Component<span class="token operator">:</span> ComponentDecorator <span class="token keyword">import</span> Component</code><div class="typing-tooltip-markup">Supplies configuration metadata for an Angular component. Component decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>
    Docs
    0
  • @Component({
      selector: 'my-component',
      template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>'
    })
    class MyComponent {
      person?: Person;
      address?: Address;
    
      setData(person: Person, address: Address) {
        this.person = person;
        this.address = address;
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • /* avoid */
    
    @Component({
      selector: 'toh-hero-button',
      template: `<button>OK<button>`
    })
    export class HeroButtonComponent {
      onInit() { // misspelled
        console.log('The component is initialized');
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • @Input() items: Item[] = [];
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • export class ProductAlertsComponent implements OnInit {
    
      @Input() product!: Product;
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">ProductAlertsComponent</span></code></pre>
    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;
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • @Input() childItem = '';
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • @Component({
      selector: 'toh-hero',
      template: `...`
    })
    export class HeroComponent {
      @Input() id?: string;
    
      process() {
        if (this.id) {
          // ...
        }
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • export class HeroComponent {
      @Output() savedTheDay = new EventEmitter<boolean>();
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">HeroComponent</span></code></pre>
    Docs
    0
  • @Component({
      selector: 'app-zippy',
      template: `
        <div class="zippy">
          <div (click)="toggle()">Toggle</div>
          <div [hidden]="!visible">
            <ng-content></ng-content>
          </div>
        </div>
      `,
    })
    export class ZippyComponent {
      visible = true;
      @Output() open = new EventEmitter<any>();
      @Output() close = new EventEmitter<any>();
    
      toggle() {
        this.visible = !this.visible;
        if (this.visible) {
          this.open.emit(null);
        } else {
          this.close.emit(null);
        }
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • /* avoid */
    
    @Component({
      selector: 'toh-hero',
      template: `...`
    })
    export class HeroComponent {
      @Output() onSavedTheDay = new EventEmitter<boolean>();
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • export class SizerComponent {
    
      @Input()  size!: number | string;
      @Output() sizeChange = new EventEmitter<number>();
    
      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);
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">SizerComponent</span></code></pre>
    Docs
    0
  • export class ProductAlertsComponent {
      @Input() product: Product | undefined;
      @Output() notify = new EventEmitter();
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">ProductAlertsComponent</span></code></pre>
    Docs
    0
  • import { Directive } from '@angular/core';
    
    @Directive({
      selector: '[tohValidator2]',
      host: {
        '[attr.role]': 'role',
        '(mouseenter)': 'onMouseEnter()'
      }
    })
    export class Validator2Directive {
      role = 'button';
      onMouseEnter() {
        // do work
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Directive</span> <span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Directive<span class="token operator">:</span> DirectiveDecorator <span class="token keyword">import</span> Directive</code><div class="typing-tooltip-markup">Directive decorator and metadata. Type of the Directive metadata.<br><br><em>@Annotation</em><br><br><em>@publicApi</em><br><br><em>@publicApi</em></div></pre>
    Docs
    1
  • @Directive({
      selector: '[tohHighlight]'
    })
    export class HighlightDirective {
      @HostListener('mouseover') onMouseEnter() {
        // do highlight work
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • @Directive({
      selector: '[tohValidate]'
    })
    export class ValidateDirective {}
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • /* avoid */
    
    @Directive({
      selector: '[validate]'
    })
    export class ValidateDirective {}
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { Directive } from '@angular/core';
    
    @Directive({
      selector: '[appItem]'
    })
    export class ItemDirective {
    // code goes here
      constructor() { }
    
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Directive</span> <span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Directive<span class="token operator">:</span> DirectiveDecorator <span class="token keyword">import</span> Directive</code><div class="typing-tooltip-markup">Directive decorator and metadata. Type of the Directive metadata.<br><br><em>@Annotation</em><br><br><em>@publicApi</em><br><br><em>@publicApi</em></div></pre>
    Docs
    0
  • class MyComponent {
      constructor(@Optional() other: OtherComponent) {}
    
      @ContentChild(OtherComponent)
      other: OtherComponent|null;
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span></code></pre>
    Docs
    0
  • constructor(@Optional() config?: UserServiceConfig) {
      if (config) { this._userName = config.userName; }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) {
      if (parentModule) {
        throw new Error(
          'GreetingModule is already loaded. Import it in the AppModule only');
      }
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples