Utilizing an object property for @Input binding in Angular: A step-by-step guide

I am currently delving into Angular and Ionic Frameworks, honing my skills through practice. I'm encountering an issue with a basic @Input test, where I am trying to iterate through an array of Tab Pages and then display each tab using <ion-tab>. Below is the code snippet:

tabs.html 

<ion-tabs>
  <ion-tab *ngFor="let page of tabPages" [root]="page.root" [tabTitle]="page.title">
  </ion-tab>
</ion-tabs>

tabs.ts 

import { Component }    from '@angular/core';

// - - - Pages Components - - - //
import { AboutPage }    from '../about/about';
import { ContactPage }  from '../contact/contact';
import { HomePage }     from '../home/home';
import { SettingsPage } from "../settings/settings";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tabPages : Array<any>;

  constructor() {
    this.tabPages = [];

    this.tabPages.push( { root : HomePage, title : "Home" } );
    this.tabPages.push( { root : AboutPage, title : "About" } );
    this.tabPages.push( { root : ContactPage, title : "Contact" } );
    this.tabPages.push( { root : SettingsPage, title : "Settings" } );
  }
}

I am wondering if there is a way to bind a property from an object and use it as input for a component?

Thank you for any assistance provided.

angulartypescriptionic-frameworkinput

Answer №1

Absolutely, that can be done.

<ng-container *ngFor="let page of tabPages" >
  <ion-tab [root]="page.root" [tabTitle]="page.title">
  </ion-tab>
</ng-container>

Additionally, your child component will need something similar to the following:

@input root: string;
@input tabTitle: string;

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

Angular error: Attempting to access the value property of an undefined object

When attempting to delete a row from a table, an error occurred stating "TypeError: Cannot read property 'value' of undefined" after placing the delete button at the end of a row. I watched this video tutorial for guidance on deleting a row witho ...

angulartypescripthtml-table

"Learn the trick of converting a stream into an array seamlessly with RxJs.toArray function without the need to finish the

In order to allow users to filter data by passing IDs, I have created a subject that can send an array of GUIDs: selectedVacancies: Subject<string[]> = new Subject(); selectedVacancies.next(['a00652cd-c11e-465f-ac09-aa4d3ab056c9', ...

angulartypescriptrxjs

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

Exploring the depths of Angular2 RC6: Implementing nested modules and routing

Within my application, I have a module called SupportModule which consists of 3 sub-modules: AdminModule, ChatModule, and ContactModule. Each of these modules has its own defined routing structure. The overall structure resembles something like this: htt ...

angularangular2-routing

Exploring the similarities between using jQuery AJAX post and Angular

In my current project, I have a legacy application that relies on jQuery and unfortunately cannot incorporate Angular at this time. For one specific task, I need to make an AJAX POST request to consume a web service using jQuery. Interestingly, the same ...

jqueryajaxangularangular8

Adding form controls to an existing form group in Angular 2 can be done by following these steps

Initially, I have created a form group in ngOnInit. However, I need to dynamically add more controls to this existing form group when a specific control is clicked. These additional controls are obtained from another API call made in ngOnInit. The image be ...

angularangular2-templateangular2-formsangular2-services

Updating *ngIf in Angular 6 after the Component has finished Loading

Component: import { Component, OnInit } from '@angular/core'; // Services import { AuthService } from './services/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleU ...

angularangular6

Angular custom filter with FabricJS

I am working with a binary/grayscale image and my objective is to filter the image so that all white color becomes transparent and all dark colors change to a specific user-defined color. I am facing challenges in creating a custom filter in Angular. I ha ...

javascriptangularfabricjs

Selecting Countries and States in Angular 2

Within my form, I have incorporated two dropdowns using <select> tags for country and state selection. The idea is that when a user picks a country, the state dropdown should automatically populate with the corresponding options. This functionality i ...

angulardrop-down-menunpm

Nearly every category except for one from "any" (all varieties but one)

In Typescript, is it feasible to specify a type for a variable where the values can be any value except for one (or any other number of values)? For instance: let variable: NOT<any, 'number'> This variable can hold any type of value excep ...

typescript

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

My goal is to utilize Drizzle for inserting data into a table and updating it if the key already exists. In MySQL, the code would look like this: INSERT INTO myTable1(field1,field2,field3,field4) SELECT fieldOne,fieldTwo,fieldThree,fieldFour FROM myTable2 ...

typescriptnext.jsdrizzle

Dealing with Endless Loops in React TypeScript: What Happens When State is Set in Multiple Instances of the Same

I'm currently facing an issue where I have two instances of the same component being rendered: <div><Modal title='Login'/></div> <div><Modal title='Join'/></div> Within the component, based on ...

reactjstypescript

Typescript's mock function allows developers to create mock implementations of

Here is the code that needs to be mocked: const P = { scripts: { getScripts: (name?: any) => { // do some stuff and return json return { foo: 'value'}; } } } export default P; The code needing ...

typescriptmockingmocha.jssinon

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

I am facing difficulties deploying my project on netlify due to NPM errors. Below are the dependencies: "dependencies": { "@angular/animations": "~15.1.1", ... (list of dependencies continues) ...

javascriptangulartypescriptnpmdependencies

Error in ng2-pdf-viewer: Invalid parameter object received. Please provide either the .data, .range, or .url parameter

Trying to integrate ng2-pdf-viewer into my Angular 7 project has been a challenge. Initially, I tackled a cors issue by following this advice. However, I am now faced with the error below: Invalid parameter object: need either .data, .range or .url at Obj ...

angularpdfurl

Filtering without the includes() Method

I have two Objects that are structured as follows: export const recipes: Recipe[] = [ new Recipe( id: "Green", scenario: ["1", "2"]), new Recipe( id: "Blue", scenario: ["1", "2","2"]) ]; export const scenarios: Scenario[] = [ new Scenario( id: "1 ...

javascripttypescript

Production environment causing issues with router.url functionality

Encountering an issue in production (server with Apache) with the Router component of Angular version 4.4.6. Below is the code snippet: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params, Router} from '@angul ...

angularapache

Here is the unique rewrite: "Learning how to write true or false tests in Jasmine for Angular can be tricky, especially when encountering the error message: 'Argument of type is not assignable to

I have a function that is supposed to return true or false, as shown below. However, I am encountering an error saying Argument of type 'true' is not assignable to parameter of type 'Expected<void>'. Can you help me identify where ...

angularunit-testingkarma-jasmine

Is the client component not initializing the fetch operation?

On my page, there is a sidebar that displays items by fetching data successfully. However, when I click on one of the sidebar items to pass props to another component for fetching data, it doesn't fetch any data until I manually click the refresh butt ...

typescriptnext.jsfetchreact-querytanstackreact-query

Unlock the potential of Angular $http by leveraging TypeScript generics in your web development projects

I have been attempting to implement a generic promise return in my code: public getUserData: () => ng.IPromise <string> = () => { var promise = this.makeRequest<string>('http://someurl.com',null) .then((resp ...

angularjsgenericstypescriptpromise