Developing applications using Angular/Ionic framework that follows a component-based architecture

I currently have 2 child components displayed below.

Child component 1:

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

Child component 2:

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

The styles, positions, and other aspects are identical in both components. However, the content differs - such as images and text. Therefore, I am looking to build a completely component-based Ionic/Angular app. My question is whether I should use 2 separate components or implement the same component with *ngIf and @Input() bindings to dynamically display different text and images based on the parent page?

For example, would it be sufficient to use one component with conditional logic, or is it necessary to create 2 distinct components for these scenarios? It appears that there is a strong link between the components and the parent; therefore, making changes might require extensive modifications due to potential impact on other areas. Am I correct in my assessment?

<ion-grid>
  <ion-row>
    <ion-col size="12" class="ion-text-center padding-bottom-0">
      <h5 class="font-bold margin-top-bottom-5">{{'Client.Parcel-Delivery-Cost' | translate}}</h5>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center" *ngIf="isPickUp">
      <div>{{'Client.Parcel-Picked-Up-From-The-Location-And-Delivered-To-You' | translate}}</div>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center" *ngIf="!isPickUp">
      <div>{{'Client.Parcel-Picked-Up-And-Handed-Over-To-Respective-Courier' | translate}}</div>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center font-bold">
      <h4 class="margin-top-5 font-bold"> {{parcelDeliveryCost}}</h4>
    </ion-col>
  </ion-row>
</ion-grid>
angulartypescriptionic-frameworkionic5

Answer №1

For this scenario, all you really need is one component - a simple Component called StepComponent.

export class StepComponent implements OnInit {
@Input() details: DetailData;

constructor(){}
ngOnInit(){}

}

Within the template, make sure to access the details property in order to display the data. The DetailData serves as a model for storing all detail properties (such as name, description, image).

<h4>{{details.name}}</h4>
<p{{details.description}}</p>

Another useful technique for reusing logic and rendering different content when needed is content projection. You can learn more about it here:

Answer №2

Angular is known for its component-based architecture, which means avoiding code rewriting whenever possible is generally recommended. This is particularly true when the layouts are identical.

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

Is there a way to prevent an undefined legend from being automatically created in an ng 2 chart during the loading process?

While working with the ng-2 chart, I noticed that an undefined legend is automatically generated in the stacked bar chart with a color that I did not specify. I am using a specific set of colors defined in an array. Is there a way to remove only the undefi ...

angularchart.jsng2-charts

Is it feasible to create a test case for code that is located within the constructor in Angular?

I have the following code snippet within my constructor: constructor( private ngxSpinner: NgxSpinnerService, private userSecurityService: UserSecurityService, private userInformationService: UserInformationService, private navigateService ...

angularunit-testing

Issues with Angular Reactive Forms Validation behaving strangely

Working on the login feature for my products-page using Angular 7 has presented some unexpected behavior. I want to show specific validation messages for different errors, such as displaying " must be a valid email " if the input is not a valid email addre ...

javascriptangulartypescriptangular-reactive-formsangular-validation

Using RouterLink in a div component with Angular's router version 3.0.0-alpha.3

After declaring a div with routerLink, I realized that it was working fine in previous versions but not anymore in (@angular/router 3.0.0-alpha.3). Has anyone found a solution to this issue? <a class="my-item" [routerLink]="['/hero']">... ...

angularangular2-routing

Angular is disregarding certain JSON fields when creating objects

My goal is to fetch data from the wagtail API, but it returns the JSON in a complex format. { "id": 3, "meta": { "type": "home.HomePage", "detail_url": "http://localhost:8000/api/v1/pages/3/" }, "parent": null, "title": ...

jsonangulartypescript

CPU usage spikes after launching a Cordova project in Visual Studio 2015 RTM

If you're looking for the source code of the project, you can find it at https://github.com/Yaojian/Ionic-TypeScript-Starter/. I decided to create a Visual Studio project by forking https://github.com/Justin-Credible/Ionic-TypeScript-Starter/ and fol ...

cordovatypescriptvisual-studio-2015

Identifying Angular 2 templates post-file separation: a step-by-step guide

I am currently trying to figure out how to initiate a project in Angular 2 and have encountered an issue. Following the steps outlined in this Angular 2 guide, I was able to separate my .ts files from .js files by configuring my 'temp' directory ...

javascriptangularjsnode.jsangulartypescript

Is there a way to send client browser console logs to the backend via a REST API in an Angular 4 application?

Is there a way to send client browser console logs to the backend using a REST API in an Angular 4 application? I need all types of logs (Console.log, console.error, console.warn) to be forwarded. I've explored the following options: Using stack ...

angulartypescript

What is the best way to calculate the total sum of dynamically changing inputs in Angular 2?

Is there a way to calculate the total sum from dynamic inputs in angular 2? I'm not sure how to implement this. Thanks! https://i.sstatic.net/eXBjN.png //html component <md-input-container style="width: 80px;"> <input md-inp ...

angulartypescript

Exploring the concept of ngForm and ngModel within template-driven forms in Angular

Hello, I have recently delved into the world of angular and ionic development. I've learned that interpolation and property binding are used to pass data from the class to the template. Interpolation is limited to strings, whereas property binding su ...

angularangular-ngmodel

Using TypeScript TSX with type parameters

Is it possible to define type parameters in TypeScript TSX syntax? For instance, if I have a class Table<T>, can I use something like <Table<Person> data={...} /> ...

typescript

"The Promise of Generics in Typescript: Unlocking Unique Return

In my current project, I am working on implementing a function that will always return a fulfilled promise of the same "type" that is passed to it as a parameter. This means that if I call the function with a boolean parameter, it should return a fulfille ...

typescriptgenericspromisetypescript-generics

The property 'text' cannot be defined as it is undefined

xml code screenshotError screenshotI'm facing an issue where I am trying to bind a label with my code and set its text, but every time I run the code, I get an error message saying 'Cannot set property 'text' of undefined'. I have ...

typescriptnativescript

Creating a dynamic web application using Asp .NET Web Api, MVC, and Angular 2, integrating an action that

Working on an ASP .NET MVC application integrated with Angular 2, I encountered a problem when trying to communicate from the angular service to a WebApi Controller. The issue arises when attempting to access an action within the WebApi Controller that req ...

c#asp.net-mvcangularasp.net-web-apiroutes

Utilizing ngx-logger Dependency in Angular 6 for Efficient Unit Testing

Have you ever attempted to test classes in Angular that rely on ngx-logger as a dependency? I am looking for guidance or examples of how this can be achieved using testing frameworks such as Jasmine. It seems there are limited resources available on mock ...

angulartypescriptjasmine

Navigating to sub-routing module without utilizing lazy loading

I prefer to use multiple routing modules to maintain a clean and readable application structure. Currently, I have implemented lazy loading for the SubComponent, but I am exploring alternatives to avoid this. Below is the functioning code in use: The foll ...

angularrouteslazy-loadingrouterangular-routing

Having trouble deciding between flatMap and concatMap in rxJs?

Having trouble grasping the distinction between flatMap and concatMap in rxJs. The most enlightening explanation I found was on this Stack Overflow post about the difference between concatMap and flatMap So, I decided to experiment with it myself. import ...

javascripttypescriptrxjsflatmapconcatmap

What causes TypeScript to display an 'Object is potentially undefined' error message when utilizing array.at(-1)?

An issue arises in Typescript with the error message "Object is possibly 'undefined'" when attempting to access an element at a negative index using array.at(-1).key //array[array.length - 1].key. This error does not occur in the following code: ...

arraystypescriptundefined

A guide on assigning a value to an array within a formgroup

if (Object.prototype.hasOwnProperty.call(data, 'checklists')) { if (Array.isArray(data.checklists)) { data.checklists.map((dt: any) => { dt.tasks.forEach((task: any) => { const dataArray = new FormGroup({ ...

javascriptangulartypescript

Can you verify that the client's date and time locale are accurate in JavaScript before proceeding with processing?

For my application, I am seeking the current locale datetime. However, before retrieving the date, it is crucial to verify that the local date and time are accurate. If the user has adjusted the date and time incorrectly on their machine, I must prompt a ...

javascripttypescript