Interactive website built on Angular 16 offering advanced search and result display functionalities, along with options to edit and update data

Seeking guidance from experienced Angular developers as I am relatively new to the framework. Any tips or advice would be greatly appreciated.

Project Overview: Front-end development using Angular, minimal focus on Back-end (C#) for now.

https://i.sstatic.net/FmGMO.png

Goal of the website:

  1. The ability to search for a customer by entering their name or number. This will trigger a call to a back-end server, although currently utilizing a local JSON file as a placeholder. Upon opening the page, only the prompt "Search for information", an input field, and a button should be visible.

  2. After hitting the search button and receiving results, a table should populate below the search bar with the search findings. The table should only display if there is a successful search; otherwise, empty space should remain below the search bar.

  3. I aim to interact with the search results to access details or make modifications to the data.

  4. The "Details/Modify" section will be positioned beneath the Results table.

This encapsulates the project scope.

To the Angular community, my query is – how do I organize the structure of the website?

When I mention structure, I'm referring to the number of components, services, types of bindings, etc. Which components are best suited for nesting?

If any crucial aspects have been skimmed over, please feel free to inquire.

Appreciate your help in advance.

angulartypescript

Answer №1

Implementing smart and dumb components

If you are working on a basic customer CRUD (create-read-update-delete) functionality, it is recommended to divide your components into smart and dumb ones.

The main component, referred to as the smart component (customer-crud.component.ts), will serve as the page where all the actions take place.

This smart component will be responsible for fetching data from the service and passing it down to its child components. The dumb UI components, on the other hand, will simply receive input and emit events based on user interactions.

customer-feature/
  customer-crud.component.ts // This smart component manages data flow between service and child components
  customer.service.ts // Service responsible for handling operations like getting customers, creating, updating, and deleting
  ui/
    search.component.ts // A dumb component that emits the search query
    customer-table.component.ts // A dumb component that receives a list of customers and emits 'details' and 'change' events
    customer-detail.component.ts // A dumb component that presents customer details
    customer-form.component.ts // An optional dumb component that receives a customer for editing and emits events upon creation or update

Access Stackblitz Demo

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

Sorting through items within a container object

I am currently working with an object named 'docs' that contains multiple objects within it. I am attempting to determine the count of entries that have specific values for both 'exopp_rooms_id_c' and 'is_active'. While this m ...

angulartypescript

Exploring the depths of Typescript: Navigating through intricate mapping of keys and types in dynamic

Explaining this may be a bit tricky, but I'll start with stating my objective and then elaborate on the question as clearly as possible: Note: The version of typescript doesn't matter to me, any solution would be appreciated. interface Type {} ...

typescripttypescript-typings

How can I display 4 react components, such as custom buttons, in a manner that ensures the most recently pressed button appears on top?

I've been attempting to solve this problem, but I'm struggling to find a solution. My current approach involves grouping the 4 button components in an array and shifting their positions based on user input. Is there a more efficient way to accomp ...

reactjstypescriptreact-native

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Encountering an issue with displaying plugins properly within <script> and <template> tags on WebStorm. Firstly, let's take a look at my files and configuration: tsconfig.config.json { "extends": "@vue/tsconfig/tsconfig. ...

typescriptvue.js

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encou ...

javascripttypescriptpromise

Issue with Filtering Function in Kendo Angular 2 Grid

I have recently started incorporating the Kendo Grid with Angular 2 by following the guidelines in this tutorial: http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/. However, I am facing a challenge as I am unable to locate the filteri ...

angularkendo-ui-angular2

Styling Form validation with Ant Design

Can a className prop be included in the Form.Item validation? <Form.Item name="username" rules={[ { required: true, message: '...' }, className="customValidation" //<- attempting to add a className but it is not fu ...

javascriptreactjstypescriptantd

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

npm version 7.5.4 has been detected, but the Angular CLI currently requires npm version 6 to function properly due to ongoing issues. To proceed, please install a compatible version by running this command: npm install --global npm@6. For more information ...

javascripthtmlnode.jsangularnpm

Ionic 3: Struggling to Access Promise Value Outside Function

I've encountered an issue where I am unable to retrieve the value of a promise outside of my function. It keeps returning undefined. Here's what I have attempted so far: Home.ts class Home{ dd:any; constructor(public dbHelpr:DbHelperProvider ...

angulartypescriptionic-frameworkionic2ionic3

When you eliminate the Angular root element, what are the consequences that follow?

I am in the process of manually bootstrapping an Angular application. ngDoBootstrap(app) { app.bootstrap(AppComponent); } Each time the root element is removed from the DOM and re-injected, I bootstrap the application again. This cycle repeats multip ...

angular

Looping through arrays within objects using NgFor in Angular 2/JavaScript

I have a custom object with data that I am iterating through using ngFor. Within this object, there is an array component that I also want to iterate through in a <li></li>. Currently, the output appears as one complete string within each < ...

javascriptarraysangularangular2-template

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Currently I am working on an Ionic/Angular application and I have encountered a situation where I am attempting to utilize ngModel. Essentially, I am trying to implement the following functionality within my app: <ion-list> <ion-item> <ion ...

javascriptangulartypescriptionic-framework

What is the best way to export an overloaded function in TypeScript?

Trying to figure out how to overload a function in TypeScript so it can determine the type of arg2 based on the value of arg1. Arg1 has a list of known values. Here's a rough example of what I'm attempting: interface CatArgs {legs : number} int ...

typescript

"When a class extends another class and utilizes properties within a static property, it essentially becomes

I have been encountering challenges with generics in TypeScript for quite some time now. My current setup is as follows: First, there is a generic class defined as: class Entity { public static schema = {}; } Then, there is a class that extends the ...

typescripttypescript-generics

The data type of the element is implicitly set to 'any' due to the fact that a 'string' expression cannot be used to reference the type '(controlName: string) => boolean'

checkError(typeofValidator: string, controlName: string): boolean { return this.CustomerModel.formCustomerGroup.contains[controlName].hasError(typeofValidator); } I am currently learning Angular. I came across the same code in a course video, but it i ...

angulartypescript

React Native error - Numeric literals cannot be followed by identifiers directly

I encountered an issue while utilizing a data file for mapping over in a React Native component. The error message displayed is as follows: The error states: "No identifiers allowed directly after numeric literal." File processed with loaders: "../. ...

typescriptreact-native

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

javascripthtmlarraysangulardatatable

Applause tally problem in Ionic3

For my university project, I am utilizing Ionic-3 and attempting to achieve a similar effect as shown in this example. Please take a look at my code on StackBlitz. I am encountering an issue where I want the count circle to move from the bottom to the top ...

angularionic-frameworkionic3

The function named updateContact is not defined, even though it has been declared

Presented below is Angular code snippet: @Component({ selector: 'app-detail-view', templateUrl: './detail-view.component.html', styleUrls: ['./detail-view.component.css'] }) export class DetailViewComponent implements O ...

javascriptangular

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe