CODEWITHSUNDEEP
angular
user9558018
user9558018

Reputation: 1

How to import data to another model in Angular?

I'm new to Angular and have some burning questions. As I am not experienced in this language, I hope you all may understand what I'm asking.

I have looked through the books and other sources but can't seem to get the right answer

In my user.ts I declare the User class

export class User {
  constructor(public id:number, public name: string, public image: string, public hobbies: any ) {}
}

In my hobbies.ts I declare the Hobbies class

export class Hobby {
  constructor(public id:number, public hobbyType:string, public hobbyDesc:string) {}
}

I had a list of Hobbies in hobby-list.ts

export const HOBBIES: Hobby[] = [{id:1, hobbyType:"Snorkeling", hobbyDesc:"Snorkeling is the practice of swimming on or through a body of water while equipped with a diving mask, a shaped breathing tube called a snorkel, and usually swimfins. In cooler waters, a wetsuit may also be worn."},
{id:2, hobbyType:"Diving", hobbyDesc:"Scuba diving is a mode of underwater diving where the diver uses a self-contained underwater breathing apparatus, which is completely independent of surface supply, to breathe underwater."}
]

I listed an array of User in another ts 

import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies: <not sure how to get the hobby type listing from Hobbies-list.ts>}
]

So the expected results will be having the list of Users display in User.componment.html and the user's hobbies will be shown Eg. Name: Mandy <br> Image: mandy.jpg <br> Hobbies: Scuba Diving

I reckon the html code will be like this? 

<h2>All Users</h2>
<ul *ngFor="let user of users">
<li>{{user.name}}</li>
<ul *ngFor="let hob of users.hobby">
<li>{{hob.hobbyType}}</li>
</ul>
</ul>

Thanks for all the help!

Upvotes: 0

Views: 440

Answers (3)

Debabrata Paul Chowdhury
Debabrata Paul Chowdhury

Reputation: 495

I think you are asking how to set hobbies property in const USERS. Then first you change the User Class hobbies property type to array of Hobby as shown below :

export class User {
  constructor(public id:number, public name: string, public image: string, public hobbies: Hobby[] ) {}
}

Then you can assign hobbies property in const USERS as follows

import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies:HOBBIES }
]

In component class file assign 

this.users =USERS // assign the USER constant

In HTML 

<div *ngFor="let user of users">
  {{user.name}} <br/>
   <img [src]="user.image"/> <br/>
   Hobbies 
   <ul *ngFor="let hob of users.hobby">
     <li>{{hob.hobbyType}}</li>
   </ul>
</div>

To assign some specific hobbies to users.Create class variable.

hobbies :  Hobby[] =HOBBIES ;

Now assign USER

export const USERS: User[] = [
{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[this.hobbies[0] ] },
{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[this.hobbies[0],this.hobbies[1] ] }
]

or you can assign HOBBIES as follows

    import {Hobby} from './hobby.ts';
    import {HOBBIES} from './hobby-list.ts';
    export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[HOBBIES[0]] },
{id:2, name:"Mandy1",image:"mandy1.jpg",hobbies:[HOBBIES[0],HOBBIES[0]] }

    ]

Upvotes: 1

RajuPedda
RajuPedda

Reputation: 3379

 export class Hobby {

     id:number;
     hobbyType:string;
     hobbyDesc:string

    }



export class User {

id:number;
name: string; 
image: string;

hobby: Hobby

}


export class Users {

 user: User [];


}

In Template

<h2>All Users</h2>
<ul *ngFor="let user of users">
  <li>{{user.name}}</li>
<ul *ngFor="let hob of user.hobby">
 <li>{{hob.hobbyType}}</li>

Upvotes: 0

juancarlos
juancarlos

Reputation: 631

the proble is your import, you do destructuring or use export default in your models for example: export default class User {}, but with only export you need apply destructuring like this:

import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies: <not sure how to get the hobby type listing from Hobbies-list.ts>}
]

Upvotes: 0

Related Questions