Angular 2
उन्नत घटक उदाहरण

टिप्पणियों

पूर्वावलोकन के साथ छवि पिकर

इस उदाहरण में, हम एक छवि पिकर बनाने जा रहे हैं जो अपलोड करने से पहले आपकी तस्वीर का पूर्वावलोकन करता है। पूर्वावलोकनकर्ता इनपुट में ड्रैग और ड्रॉपिंग फ़ाइलों का भी समर्थन करता है। इस उदाहरण में, मैं केवल सिंगल फाइल अपलोड करने जा रहा हूं, लेकिन आप मल्टी फाइल अपलोड को काम में लेने के लिए थोड़ी छेड़छाड़ कर सकते हैं।

छवि preview.html

यह हमारी छवि पूर्वावलोकन का HTML लेआउट है

<!-- Icon as placeholder when no file picked -->
<i class="material-icons">cloud_upload</i>

<!-- file input, accepts images only. Detect when file has been picked/changed with Angular's native (change) event listener -->
<input type="file" accept="image/*" (change)="updateSource($event)">

<!-- img placeholder when a file has been picked. shows only when 'source' is not empty -->
<img *ngIf="source" [src]="source" src="">

छवि preview.ts

यह हमारे <image-preview> घटक के लिए मुख्य फ़ाइल है

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

@Component({
    selector: 'image-preview',
    styleUrls: [ './image-preview.css' ],
    templateUrl: './image-preview.html'
})
export class MtImagePreviewComponent {

    // Emit an event when a file has been picked. Here we return the file itself
    @Output() onChange: EventEmitter<File> = new EventEmitter<File>();

    constructor() {}

    // If the input has changed(file picked) we project the file into the img previewer
    updateSource($event: Event) {
        // We access he file with $event.target['files'][0]
        this.projectImage($event.target['files'][0]);
    }

    // Uses FileReader to read the file from the input
    source:string = '';
    projectImage(file: File) {
        let reader = new FileReader;
        // TODO: Define type of 'e'
        reader.onload = (e: any) => {
            // Simply set e.target.result as our <img> src in the layout
            this.source = e.target.result;
            this.onChange.emit(file);
        };
        // This will process our file and get it's attributes/data
        reader.readAsDataURL(file);
    }
}

another.component.html

<form (ngSubmit)="submitPhoto()">
    <image-preview (onChange)="getFile($event)"></image-preview>
    <button type="submit">Upload</button>
</form>

और बस। एंगुलरजस 1.x में इससे ज्यादा आसान तरीका था। मैंने वास्तव में इस घटक को एक पुराने संस्करण के आधार पर बनाया था जिसे मैंने AngularJS 1.5.5 में बनाया था।

इनपुट द्वारा तालिका मानों को फ़िल्टर करें

ReactiveFormsModule और फिर आयात करें

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'component',
  template: `
    <input [formControl]="control" />
    <div *ngFor="let item of content">
      {{item.id}} - {{item.name}}
    </div>
  `
})
export class MyComponent implements OnInit, OnDestroy {

  public control = new FormControl('');

  public content: { id: number; name: string; }[];
  
  private originalContent = [
    { id: 1, name: 'abc' },
    { id: 2, name: 'abce' },
    { id: 3, name: 'ced' }
  ];
  
  private subscription: Subscription;
  
  public ngOnInit() {
    this.subscription = this.control.valueChanges.subscribe(value => {
      this.content = this.originalContent.filter(item => item.name.startsWith(value));
    });
  }
  
  public ngOnDestroy() {
    this.subscription.unsubscribe();
  }
  
}