Show information in angular format

I'm struggling to showcase the data that I've already transferred from another component in my form. Below is the interface for reference: https://i.sstatic.net/zOWvU.png

Even after attempting to utilize ngModel, it still didn't yield the desired results. Here's a snippet of my code:

form.ts :

import { Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import { Route } from '@angular/router';
import { SharedService } from '../services/shared.service';

@Component({
  selector: 'app-repo',
  templateUrl: './repo.component.html',
  styleUrls: ['./repo.component.scss']
})
export class RepoComponent implements OnInit {
  data = this.shared.getData();       

  constructor( private router: Router, private shared: SharedService ) {
    if(this.data){
      console.log(this.data);
    }
    else{
      this.router.navigateByUrl('/Deals');
    } 
  }
  ngOnInit(): void {
  }
}

form.html:

 <form #form="ngForm"  autocomplete="off" >
    <div class="form-group">
        <label>Deal Class</label>
        <input required type="text" id="dealclass"  name="Dealclass" [(ngModel)]="data.DEALCLASS" style="width: 400px;"> 
      </div>
</form>**

If you have any insights or suggestions, they would be greatly appreciated! Thank you and may your day be fabulous :)

Answer №1

Give this a shot:

initiate( private navigator: Router, private sharedService: SharedService ) {
if(this.information){
this.formData.setValues(this.information.rowData); //<-- insert values in ngFrom
  console.log(this.information);
}
else{
  this.navigator.navigate('/Deals');
} 

}

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

What is the best way to create a function that can securely search for a URL containing parameters while ensuring type safety?

I am working on a NextJS/React application. We have a large object containing internal URLs, each with a createPath function that looks similar to this: const URLS = { dashboard: { createPath: ({ accountNumber }: { accountNumber: string }) => ...

Having trouble showing table data in Angular

My goal is to showcase data from a table created using Spring-Boot Below is my model.ts: export class Quiz1 { QuestionId?: any; Question?: string; OptionsA?: string; OptionsB?: string; OptionsC?: string; OptionsD?: string;} He ...

When building websites, pages, or applications with React, how do you determine the best choice between JavaScript, TypeScript, or JavaScriptXML?

After completing my portfolio and an eCommerce website design using Figma, I started learning React and Tailwind with Vite. I'm comfortable with basic JavaScript but now I want to understand the differences between .js, .jsx, and .ts files when workin ...

`Angular Model Value Bin for Arrays causing a bug`

I am attempting to link API values to HTML using *ngFor, and here is the code I have: HTML <nb-card accent="info"> <nb-card-header>Item Quantity</nb-card-header> <nb-card-body> <div *ngFor="let location of ...

The issue of ElementRef being undefined can arise when utilizing the @ViewChild directive

import {Component, ElementRef, HostBinding, ViewChild} from '@angular/core'; export class MainPage { constructor( el: ElementRef ) { this.contentElement = el.nativeElement; } contentElement = null; @ViewChild('wrapper' ...

Setting up raw-loader in Angular 7 for loading text files

I am struggling to implement a raw-loader with my Angular 7 in order to import text files into my TypeScript source code. Despite spending several hours researching and attempting various methods, I have been unsuccessful in getting it to work. My journey ...

What is the best way to divide percentages accurately in Angular?

I am currently working on splitting percentages dynamically with Angular. For example, if txtBox1 has 75%, I want to split the remaining 25% between txt2 and txt3. If I change txt1 to 50%, then I want txt2 and txt3 each to receive 25%. The values may vary, ...

Troubleshooting a CORS problem with connecting an Angular application to a Node server that is accessing the Spotify

I am currently working on setting up an authentication flow using the Spotify API. In this setup, my Angular application is making calls to my Node server which is running on localhost:3000. export class SpotifyService { private apiRoot = 'http://lo ...

Updating nested forms in Angular 4

The nested form structure I am working with is a 'triple level' setup: FormGroup->ArrayOfFormGroups->FormGroup At the top level (myForm): this.fb.group({ name: '', description: '', q ...

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

I'm in the process of developing a Next.js application and I am faced with the challenge of transmitting customized error messages from the server to the client side while utilizing Next JS new server-side actions. Although my server-side code is func ...

Utilizing NGRX Entity for Selector-Based Filtering in Angular

My goal is to extract the payload data based on a specific property. //reducer.ts case MessagesActionTypes.LOAD_Message_SUCCESS: { console.log('reducer='+ JSON.stringify(action.payload.Messages));//data received here retur ...

The input element's value property updates only once

Whenever I input a number greater than 1 into the input field, the value automatically changes to 1 due to validation. Oddly enough, this only seems to work for the first number entered. For example, if I type in 11, the input value remains as it is instea ...

What is the process for establishing the default alignment of horizontal controls in CakePHP 4 using Bootstrap-UI 3?

I have a question that might be a bit tricky, but I'm hoping someone out there can help me with the Boostrap-UI plugin for CakePHP. Currently, I am using Bootstrap-UI (https://github.com/FriendsOfCake/bootstrap-ui) version 3.0, which uses Bootstrap 4 ...

How can I retrieve data from the database in Nest.js without relying on async/await?

How can I utilize a callback function to retrieve data from the database using TypeORM in Nest.js, process the data, and then send a response? ...

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

Angular 2 Error: Beyond the Bounds of Array Index

I am struggling with declaring and looping through a 4-dimensional Array in my program. Here is the snippet of code causing me trouble: Typescript: MoarInfo: any = [[[[]]]]; JavaScript: constructor(){ for(var i = 0; i < this.AllDataInfo[this.KontoA ...

Importing a JavaScript file into TypeScript in NodeJS - A step-by-step guide

I'm currently diving into TypeScript as a newcomer. I am exploring the NodeJS Loopback 4 framework, which is based on Typescript language. My query revolves around how to import functions and classes exported in a JS file into my TS file. Despite tryi ...

Determine the data type of sibling attributes by analyzing the types of other siblings

I am in the process of creating a simple abstraction that displays patches to an object. type MyObject = { attributeA: string; attributeB: boolean; attributeC: number; }; type MyObjectKeys = keyof MyObject; type Difference<Key extends MyObjectKey ...

Launching a Single Page Application PWA with a custom URL while in an offline state

Consider a scenario where you have a Progressive Web App (PWA) developed using a Single Page App (SPA) framework such as Angular - . Visit the website. Move to a different page, for example: . Switch to offline mode and reload - The site will fail to loa ...

Property 'text' is not found on type '{} | Response' in Angular/Node

After making changes to my angular project's package.json by downgrading from version 4.2.4 to 4.1.3 and then upgrading back to 4.2.4, I encountered an error while building the project: $ ng build Your global Angular CLI version (1.5.0) is greater ...