Using an alias component in Angular 2 refers to a method of referencing components with

I've encountered a snag with Ionic 2. I'm trying to navigate to a new view by obtaining a reference/alias to the component page.

In my parent class (SettingsPage), this is how I attempt to push a new page :

<ion-item [navPush]="addon.settingsLandingClss">
    {{ addon.name }}
    <ion-icon name="arrow-forward" item-right></ion-icon>
</ion-item>

Here's the TypeScript code snippet for the parent class (SettingsPage) :

import * as Mapping from '[...]';

export class SettingsPage {
     public addon: Mapping.AddonMapModel;
     constructor() {
          this.addon = Mapping.AddonMap;
     }
}

I store the page component under the 'settingsLandingClss' key:

// Importing page component
import { MyComponentPage }  from '...';

export interface AddonMapModel {
    name: string,
    settingsLandingClss: any
}

export const AddonMap = { 
     name: 'Test', 
     settingsLandingClss: MyComponentPage // <--- Reference to component page
 }

Note: It works when I import MyComponentPage in my parent class.

Answer №1

I managed to solve my problem by creating an instance of MyComponentPage using its name.

Here is a sample code snippet for the Settings Page:

import * as SettingsLandingPages from '[...]';

addon.settingsLandingClss = SettingsLandingPages['nameofclass'];

And here's how you can export all landing settings pages in SettingsLandingPages:

// Exporting all landing settings page

export * from './mycomponent.page';

If you need more information and examples, check out this link: Plunker

Thank you to everyone who helped!

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

Can Angular web applications support the integration of Microsoft Whiteboard?

Can Microsoft Whiteboard be integrated into an Angular web application? I am currently attempting to incorporate the concept of Microsoft Whiteboard into my angular web application. It is essential for our meetings to have the whiteboard feature availabl ...

Trouble retrieving data from cross-domain JSON request in AngularJS

Struggling all day to retrieve the JSON data from this specific URL: As a beginner in cross-domain calls, I attempted using JSONP and $get.JSON methods without any luck. My main goal is to extract the information from that URL link and store it in an Angu ...

Conceal pagination when printing - utilizing primeng table

In my application, I have a main component called Bill which includes a button for printing: <button class="btn btn-primary" type="button" (click)="printBill()"> Print </button> I also have a child component named BillProducts that contains a ...

"Is there a way to dynamically remap an array only when there are changes

One of the challenges I am facing is with a component called Page, which contains two components - Editor and Preview. Page has an array called items. [ { value: 0, text: 'Item 1' }, ... ] This array items is passed ...

Display the complete image once the loading process is finished on Angular 12

When retrieving image src via API from the server, I aim for the image to only be displayed once completely loaded. In the meantime, I would like a skeleton outline to be shown during the loading process (images are segmented into sections and the skeleton ...

Utilizing the PATCH method with Dropwizard to remove a designated item from a list that is a part of another list

Currently, I am working on developing a PATCH API method that can remove a specific element from a list of items. This list of items is an integral part of the Menu class in my project. Unfortunately, there is a scarcity of Dropwizard resources available o ...

Develop an item with a function that takes an input of the identical type as a variable within the item itself

I am facing a challenge with managing an array of objects that represent commands for my game. Each object includes an input field to define the types of arguments expected by the command. The purpose of this setup is to enable validation on the arguments ...

Prevent selection of items in ng-select. Modifying the default item selection behavior in ng-select

In my code, I am utilizing an angular-multiselect component to upload a list of items and populate the [data] variable of the angular-multiselect. This component displays the list of data with checkboxes, allowing me to select all, search, and perform vari ...

Tips for generating cautionary claims in Playwright TypeScript assessments for non-urgent issues?

Is there a way to implement warnings instead of failures for non-critical assertions in Playwright TypeScript tests? Currently, while working on Playwright tests using TypeScript, I am searching for a solution to handle assertions that would issue warning ...

Retrieve an enumeration from a value within an enumeration

In my coding project, I have an enum called Animals and I've been working on a function that should return the value as an enum if it is valid. enum Animals { WOLF = 'wolf', BADGER = 'badger', CAT = 'cat', } cons ...

AgGrid:CellRenderer and Observables

Having trouble getting my backend data to display in the AGGrid cell renderer component despite using observables Here are the methods I've attempted so far: Directly calling the service within the cellRenderer component Invoking the service in the ...

Ways to selectively bypass the MSAL interceptor in Angular

Currently, my application utilizes username and password authentication to obtain a custom JWT token from the backend. Once the token is acquired, it is added to the headers using a custom interceptor: @Injectable() export class JwtInterceptor implements H ...

Ensuring thoroughness in validation without the use of specific text strings

Implementing the assignment or assertion of never at the end of a function is a strategy commonly used in Typescript to ensure exhaustive checks at compile time. To enable the compiler to recognize this, explicit strings are needed for it to check against ...

An error was encountered in the rxjs-compat module at operator/shareReplay.d.ts line 2, character 10: TypeScript error TS2305

Currently, I am in the process of upgrading a basic Angular skeleton application from version 5 to version 6. However, I have encountered an issue while attempting to run the application: ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): ...

Execute the Ngrx finalization effect by triggering the shared action

My application is built using NGRX for state management, and I have an effect that searches for an object by its ID in the state. If it fails to find the object, the effect calls the server and updates the state with the retrieved data. Additionally, I wan ...

What is the process for importing from a `.d.ts` file?

This code snippet is functioning properly in a project built with angular2 RC4 import * as mapTypes from '../../../../node_modules/angular2-google-maps/core/services/google-maps-types.d.ts'; What could be causing this issue? Now, when attempti ...

Difficulty in both passing a value and accessing a child component

I am currently working on a form that includes various elements such as Company, Contact, and Date. Additionally, there is a custom component, a date picker, that is included in the form. When I fill out all the values in the form and submit it, I am able ...

Understanding NestJS Mixins and Their Distinction from Inheritance

After researching, I found that the Nestjs documentation does not include any information about mixins. Here is what I have gathered from my findings on Google and Stack Overflow: A mixin serves as a means of code sharing between classes within Nest. Esse ...

Enhance your material-ui component using TypeScript functionality

Exploring ways to enhance the Material-ui Button component by introducing new props. The objective is to introduce a new prop called fontSize with three size options - small, medium, large. <Button variant="outlined" color="primary" ...

TypeScript's reusable retry functionality

This specialized function takes an input function as its first argument and a set of customizable options as its second. It repeatedly calls the provided function, retrying until either a successful result is returned or the maximum number of attempts is r ...