Declaring Objects and Relationships in Angular Models

Wondering if it's possible to declare an object inside my model. First attempt:

export class Employee{
    emp_id: number;
    emp_fname: string;
    emp_lname: string;
    emp_birth: string;
    emp_status: string;
    emp_photo: string;
    emp_department: string; 
    department: Array<object> = 
    [{
        dept_id: number;
        dept_name: string;
    }];

Second attempt:

import { Department } from "./department.model";

export class Employee{
  constructor(department: Department){};
    emp_id: number;
    emp_fname: string;
    emp_lname: string;
    emp_birth: string;
    emp_status: string;
    emp_photo: string;
    emp_department: string; 
    department: department;

}

Encountering errors in my terminal: first one gives syntax error for missing comma or incorrect number type.

The second one throws an error

Cannot find name 'department'.

Here is my department model

export class Department {
    dept_id: number;
    dept_name: string;
}

Answer №1

class DepartmentInfo {
    department_id: number;
    department_name: string;
    constructor(department_id, department_name) {
        this.department_id = department_id;
        this.department_name = department_name;
    }
}

class Staff {
    staff_id: number;
    first_name: string;
    last_name: string;
    birthdate: string;
    status: string;
    photo: string;
    department: string;
    departments: DepartmentInfo[] = [new DepartmentInfo(1, "IT Department"), new DepartmentInfo(2, "HR Department")];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

This code snippet is from my app.component.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

Error Alert: Accessing the 'email' property on the 'UserCredential' type in Angular and Firebase is not allowed

import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { User } from './../classes/user'; import { AlertService } from './alert.service'; import { Alert } from './../classes ...

Having difficulty authenticating Slack requests

I'm currently working on a project to develop a Slack bot using the events API for an experiment at my job. I am facing challenges in verifying the request and can't seem to pinpoint where I'm making a mistake. The bot is being built using ...

Encountering a 403 error when attempting to upload files to Google Cloud Storage (GCS) using Signed URLs

The main aim is to create a signed URL in the api/fileupload.js file for uploading the file to GCS. Then, retrieve the signed URL from the Nextjs server through the nextjs API at localhost://3000/api/fileupload. Finally, use the generated signed URL to upl ...

Indulging in the fulfillment of my commitment within my Angular element

In my Angular service, I have a method that makes an AJAX call and returns a Promise (I am not using Observable in this case). Let's take a look at how the method is structured: @Injectable() export class InnerGridService { ... private result ...

The functionality of Angular's mat-autocomplete is hindered when it comes to utilizing options generated by a function

I decided to enhance the autocomplete feature on my project by taking an example from the Material official website. Instead of having the options stored in a variable within the component class, I created a function to retrieve the options. Although the o ...

Is it possible to secure an API endpoint from unauthorized access by external authenticated users not originating from the requesting application?

Currently, I am developing an Angular application where users can log in, track their progress, and earn levels/experience points. The app uses a Node.js/Express API for backend functionality, and I need to implement a way for the app to award experience ...

What is the method to group a TypeScript array based on a key from an object within the array?

I am dealing with an array called products that requires grouping based on the Product._shop_id. export class Product { _id: string; _shop_id: string; } export class Variant { variant_id: string; } export interface ShoppingCart { Variant: ...

Update the js file by incorporating the import statement

Currently, I am in the process of transitioning to using imports instead of requires for modules. Here is an example of my previous code: const { NETWORK } = require(`${basePath}/constants/network.js`); The content of network.js file is as follows: export ...

Show a modal when the axios request is finished

EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue. I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from t ...

Issue with Angular Route Guard - Incorrect redirection to login page

I'm encountering an issue with my Angular app where even after the JWT token has expired, I am still able to navigate within the application without any API data being accessible. I've double-checked my setup and it seems right, but for some reas ...

Unveiling the Swiper Instance with getSwiper in Ionic5 and Angular

Currently, I am integrating ion-slides into my Ionic 5 project built with Angular. In accordance with the instructions provided in this documentation, I aim to retrieve the Swiper instance by utilizing the getSwiper method so that I can leverage the functi ...

Hamburger Menu in Bootstrap not functioning as expected

Despite following each step meticulously for implementing the Hamburger menu in the navbar, I encountered an issue. The navbar collapses when resizing the window but fails to open upon clicking it. Below is a sample code snippet for reference. It utilizes ...

If you're trying to work with this file type, you might require a suitable loader. Make sure you

Attempting to utilize Typescript typings for the Youtube Data API found at: https://github.com/Bolisov/typings-gapi/tree/master/gapi.client.youtube-v3 Within the Ionic framework, an error is encountered after running 'Ionic Serve' with the follo ...

Selecting a filter for an array of objects

I'm struggling to implement a search feature in my mat-select DropDown. The existing options I've found online aren't quite working for me due to the object array I am passing to the Dropdown. Any assistance or guidance on this matter would ...

Tips for showing solely the current page number within angular pagination

HTML : <!-- pagination controls --> <div class="pagination-container"> <pagination-controls (pageChange)="onPageChange($event)" [maxSize]="1" [id]="config.id" [directionLinks]="true">< ...

Encountering problem installing "kendo-angular-grid" via npm

I am currently working on a project that utilizes kendo. Here is the content of the package.json file: Package.json- { "name": "angular-2-webpack-starter", "version": "0.1.0", "description": "A starter kit for angular 2 and webpack", "scripts": { ...

I am struggling to set a required input in Angular2

I am new to Angular and currently working on a project that requires input validation to ensure that no field is left blank. The project consists of an HTML file along with a .ts file for functionality. Below is a snippet from the HTML: <div class="f ...

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Using Next.js for a React application (full code available here.) Encountering an unusual error while running next build, showing errors related to prerendering on five pages: spenc@WhiteBoxu:~/workout-tracker$ next build info - Loaded env from /home/spe ...

Similar to the "beforesend" functionality in JavaScript, there is a corresponding feature

When attempting to post a comment in my ionic app using the Wordpress api, I encountered error 401 (unauthorized) indicating that the Wordpress api does not recognize me as logged in. This is the code I am using: postComment(params?: any) { let nonce = l ...