What is the best way to implement ngModel globally in my application?

Question

What is the best way to implement ngModel globally in my application?

As a newcomer to Angular 5, I am struggling to display values from the Add screen to the View screen using ngModel. My aim is to have the values added in the Add screen appear in the View screen's table.

// In my App.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BodyComponent } from './body/body.component';
import { FooterComponent } from './footer/footer.component';
import { UomComponent } from './uom/uom.component';
import { AddComponent } from './uom/add/add.component';
import { DetailsComponent } from './uom/details/details.component';
import { DeleteComponent } from './uom/delete/delete.component';

// Rest of the code remains unchanged...

angular html css angular5

Answer 1

Answer №1

Give this a shot! It will display all recently added records.

HTML CODE

<input type="text" [(ngModel)] = "itemInput.itemId"></td>
<input type="text" [(ngModel)] = "itemInput.desc"></td>
<input type="text" [(ngModel)] = "itemInput.classification"></td>
<button (click)="save()"></button>
<table> 
    <thead>
        <tr height="25">
            <th width="25%">Item ID</th>
            <th width="25%">Item Description</th>
            <th width="25%">Item classification</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of itemList ">
        <td>{{item.itemId}}</td>
        <td>{{item.desc}}</td>
        <td>{{item.classification}}</td>
    </tr>
    </tbody>
 </table>

COMPONENT CODE

export class AddComponent {
  itemInput:any = {};
  itemList = [];
  constructor() { }

  save() {
      itemList.push(itemInput);
      itemInput = {};
  }
}

Answer 2

Give this a shot! It will display all recently added records.

HTML CODE

<input type="text" [(ngModel)] = "itemInput.itemId"></td>
<input type="text" [(ngModel)] = "itemInput.desc"></td>
<input type="text" [(ngModel)] = "itemInput.classification"></td>
<button (click)="save()"></button>
<table> 
    <thead>
        <tr height="25">
            <th width="25%">Item ID</th>
            <th width="25%">Item Description</th>
            <th width="25%">Item classification</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of itemList ">
        <td>{{item.itemId}}</td>
        <td>{{item.desc}}</td>
        <td>{{item.classification}}</td>
    </tr>
    </tbody>
 </table>

COMPONENT CODE

export class AddComponent {
  itemInput:any = {};
  itemList = [];
  constructor() { }

  save() {
      itemList.push(itemInput);
      itemInput = {};
  }
}

What is the best way to implement ngModel globally in my application?

Answer №1

Similar questions

Executing a function in the view/template with Angular 2+

utilizing different types of text style

Creating customizable Isotope objects using custom CSS margins that are influenced by the child-nth selector and JavaScript

Sending a responsive email through Outlook can cause issues with the 100% width tables

Eliminate the hashtag (#) from the URL in Angular 11

Creating a Visual Loading Effect in HTML

How to send parameters to the jQuery delete button click event handler

What's causing all my carousel slides to stack on top of each other instead of presenting in a

jQuery toggle function fails to toggle div element as intended

The bottom of the page refuses to remain anchored

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

Positioning a button at the center-right

Exploring Font Choices: Customizing Your Text Style

What are the best ways to position elements within a div?

My Angular 6 app kept encountering this error repeatedly, eventually causing the browser to freeze

Customize your form fields with Bootstrap 3 input groups

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

How come the background image is not being applied using ::before?

Difficulty in displaying JavaScript function output as text

Guide on redirecting to the login page in angular2 when a process is left incomplete