1. AngularJS và Php (Xampp Mysql) bằng AngularJS
  2. Build Project Angular 7 Upload To Domain
  3. Ckeditor in Angular 7
  4. Find Some Object From Input() In Angular 7
  5. Hướng dẫn viết ứng dụng chạy trên điện thoại bằng Angular V2+Ionic+Cordova
  6. Register Angularjs and Php
  7. Login State in Angular 7 + Laravel 5.4
  8. Login State in Angular 7
  9. Login remember me Angularjs and Php
  10. Using Pipes Replace String In Angular 7
  11. Build Angular + ASP.NET MVC 5
  12. Build Web API using Angular with ASP.NET MVC5 (Part 1)
  13. Build Web API using Angular with ASP.NET MVC 5 (Part 2)

Find Some Object From Input() In Angular 7

min read

Chào mọi người nay mình chia sẻ với mọi người cách này cũng khá hay, đó là chúng ta gửi dữ liệu qua một Component khác, này mình gửi nguyên một Object luôn qua bên component khác để liệt kê lặp ra các giá trị này, ở đây mình dùng Input() trong Angular nhé mọi người!

Ở đây mình đã chuẩn bị sẵn code, mình tạo 2 component đó là func3.component.ts và func4.cpomponent.ts winkhaha bạn thấy cách mình đặt tên lạ đúng không, vì trong project của mình có nhiều file quá không biết đặt sau á mà kakasmiley

*func3.component.ts: trong Component này mình tạo một dữ liệu đối tượng để gửi sang func4.component.ts

import  {Component} from '@angular/core';

@Component({
    selector:'box-func3',
    templateUrl:"./func3.component.html",
    styleUrls:['./func3.component.scss']
})

export class Fun3Component{
    dataObject=[
        {
            "name":"JON SNOW",
            "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-02.jpg"
        },
        {
            "name":"SANSA STARK",
            "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-04.jpg"
        },
        {
            "name":"ARYA STARK",
            "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-06.jpg"
        },
        {
            "name":"BRAN STARK",
            "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-08.jpg"
        },
        {
            "name":"THEON GREYJOY",
            "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-10.jpg"
        }

    ]
}

Mình tạo file func3.component.html như sau:trong file này mình gửi dữ liệu tới component func4.component.ts 

<div class="container">
    <box-func4 [dataName]="dataObject"></box-func4>
</div>

* func4.component.ts: để nhận được dữ liệu được gửi qua trong component này mình dùng Input() được Angular hổ trợ

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

@Component({
    selector:"box-func4",
    templateUrl:"./func4.component.html",
    styleUrls:['./func4.component.scss']
})

export class Func4Component{
    @Input() dataName:any=[]
    constructor(){
        
    }
}

Tiếp theo tuy ý bạn muốn ngFor dữ liệu ra sau là tuy ý nhé:

*func4.component.html

<div class="row">
    <div class="col-md-4" *ngFor="let item of dataName">
        <h2>{{item.name}}</h2>
        <img [src]="item.image" style="width: 100%"/>
     </div>
</div>
     

Để làm được điều như trên mọi người nhớ khai báo import Component trong app.module.ts nhé, hẹn gặp mọi người các bài viết chia sẻ sau!

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)