برچسب: Data Binding

  • ارسال داده از کامپوننت به قالب در انگولار – Data Binding

    در ادامه پست های انگولار، امروز میخوام به انتقال مقادیر از logic به view بپردازم. یعنی میخام یه داده رو از کامپوننت به قالب بفرستم. برای این کار از دو روش string interpolation و property binding میتونیم استفاده کنیم که جداگانه در ادامه به اونها خواهم پرداخت.

    string interpolation در انگولار
    string interpolation در انگولار

    ارسال داده از class به template با استفاده از string interpolation در انگولار به این صورت هست که شما مقدار property موجود در کلاس رو میتونید بصورت رشته درون قالب نمایش بدید. مثلا اگه کلاس کامپوننت بصورت زیر تعریف شده باشه و my_name  یک پراپرتی از این کامپوننت باشه،

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    
    export class AppComponent {
      my_name = 'Hamid Haghdoost';
    }
    
    

    شما میتونید مثلا بصورت زیر به این پراپرتی درون قالب دسترسی داشته باشید

    <p>my name is {{ my_name }}</p>

    که اگه ng serve کنید خروجی بصورت زیر خواهد بود

    my name is Hamid Haghdoost

    property binding در انگولار

    string interpolation در واقع نوع خاصی از property binding است که در آن نوع پراپرتی string است. یعنی شما نمیتونید مثلا مقدار boolean رو از این طریق به قالب ارسال کنید. برای این کار از property binding استفاده میکنیم. یعنی میتونیم مقدار پراپرتی رو به attribute های html و… بچسبونیم.

    one way binding در angular
    one way binding در انگولار

    برای اینکه بیشتر متوجه موضوع بشید با مثال پیش میریم.

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    
    export class AppComponent {
      isDisabled: boolean = false;
    }
    
    

    در کامپوننت بالا یک پراپرتی از نوع بولین تعریف شده که در قالب به html بایند شده است

    <button [disabled]="isDisabled">Try Me</button>

    توجه کنید که برای بایند کردن مقدار بولین نمیتونستیم بصورت زیر عمل کنیم و حتما باید از روش دوم استفاده کنیم

    <button disabled="{{ isDisabled }}">Try Me</button>

    امیدوارم حرفام به دردتون خورده باشه 🙂