CODEWITHSUNDEEP
htmlangulartypescriptcomponents
Train
Train

Reputation: 3496

Angular 6 and typescript import a class with properties in component

I have a ProductButton.ts class

export class ProductButton{

    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;
}

I'm trying to import this into my component and create new instances of it. But I can't seem to create new instances of it.

here is my component class

import { ProductButton } from '../../models/ProductButton';

@Component({
    templateUrl: './product-edit.component.html',
    providers: []
})
export class ProductEditComponent implements OnInit {

    constructor(){}

    addChildTask(){
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton = new ProductButton();
        pButton.ButtonText = "";
        this.product.ProductButtons.push(pButton);
    }
}

Why I try to new up an instance of ProductButton I get an empty object with no properties. How do I create a new instance every time I hit that method?

Upvotes: 1

Views: 4415

Answers (2)

Muhammad Abdullah Shafiq
Muhammad Abdullah Shafiq

Reputation: 864

You should write a constructor for your ProductButton.ts

constructor(productBtn: any) {
  this.ProductBtnID = productBtn.ProductBtnID;
  this.ProductID = productBtn.ProductID;
  // ... rest of the properties.
}

Then in your component you can create objects of the above class like:

let prBtn = new ProductButton(obj)

where obj is the object containing attributes.

Upvotes: 1

codedawi
codedawi

Reputation: 314

When your ProductButton.ts is compiled you will get something like this in vanilla JavaScript.

// Without any properties
var ProductButton = /** @class */ (function () {
    function ProductButton() {
    }
    return ProductButton;
}());

To answer your question you will need to initialize each property in the class.

ProductButton.ts

export class ProductButton {
    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;
    constructor() {

        // Init properties as empty strings
        this.ProductBtnID = "";
        this.ParentWfTaskID = "";
        this.WfTaskID = "";
        this.TaskName = "";
        this.ButtonText = "";
        this.ProductID = ""

        // Init as O becuase type number
        this.ImageContentID = 0
    }
}

However, if you just wanted to validate the class/object's properties I would recommend using a typescript interface. Interfaces describe the public side of the class.

ProductButton.ts

export interface ProductButton {
    ProductBtnID: string;
    ProductID: string;
    ParentWfTaskID: string;
    WfTaskID: string;
    TaskName: string;
    ButtonText: string;
    ImageContentID: number;
}

ProductEditComponent.ts

import { ProductButton } from '../../models/ProductButton';

@Component({
    templateUrl: './product-edit.component.html',
    providers: []
})
export class ProductEditComponent implements OnInit {

    constructor(){}

    addChildTask(){
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton: ProductButton = {
            ProductBtnID: "942u52r",
            ProductID: "AAA12",
            ParentWfTaskID: "ww12223",
            WfTaskID: "242122",
            TaskName: "My Favorite Task",
            ButtonText: "Complete your favorite task!!!",
            ImageContentID: 234212342,
        }

        this.product.ProductButtons.push(pButton);
    }
}

Upvotes: 1

Related Questions