Upon the first page load, two menus appeared on the screen

Upon launching the app, both Main Menu and Menu One should be visible right away.

I'm struggling to simplify my code in order to implement this feature efficiently.

https://stackblitz.com/edit/angular-3q8e8q

data = SideMenu.data.subOptions[0].children;
// selected: number;
selected: number = 0;

constructor() { }

ngOnInit() {
}
showSubMenu(item: {}, i: number) {
   console.log(item['children']);
   this.selected = i;
   this.changeMainMenu.emit(item['children']);
}

The goal is to display Main Menu and Sub Menu One upon initialization.

Sub Menu Two should not be visible at this time.

angulartypescript

Answer №1

To display the sub menu on page load, simply call the showSubMenu method within the ngOnInit() function. Pass in the first item and index 0 to show the first item of the main menu along with its children.

ngOnInit() {
   this.showSubMenu(this.data[0], 0);
}

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

Creating an array with different types of objects involves specifying the types within the square brackets when

Here is an illustration of a type structure: type TFiltersTypes = 'selectableTags' | 'dropdown'; type TSelectableTabsFilterItem = { id: string; label: string; isSelected: boolean; }; type TFilter = { type: TFiltersType ...

node.jsreactjsangulartypescript

Passing a service from a custom element to a child custom element in Angular involves utilizing the

I have created a demonstration showcasing the creation of 2 custom Angular elements (refer to app.module). Everything is working smoothly, but I encountered a problem: when I provide a service in the parent element (named BarComponent), it does not get rec ...

angulardependency-injectioncustom-elementangular-dependency-injection

Display different icons in an Angular application based on the value received from an API in real

My goal was to create a dynamic form that displays icons for the fields I have created. Here is a snapshot of my UI screen showing the field explorer with the list coming from an API. https://i.sstatic.net/4Ye9G.png I need to place an icon in front of ea ...

angulartypescriptangular8

What is the most effective way to extract data that includes an array within it?

const flightList = [{ number: 343, from: "Singapore", to: "India", upgradeTypes: ["Economy to Premium Economy", "Economy to Business Class"] }, . { number: 363, from: "Chennai", to: "Sing ...

javascriptreactjsarraystypescriptfiltering

Show mistakes using source mapping (TypeScript combined with Node/Express)

In my Docker container, I have a node instance running express. Whenever I intentionally cause an error in my simple app.ts file, like below: // Start listening for requests app.listen(3000, () => { console.log('Application Service starting!&ap ...

node.jsexpresstypescript

Combining two observables into one and returning it may cause Angular guards to malfunction

There are two important services in my Angular 11 project. One is the admin service, which checks if a user is an admin, and the other is a service responsible for fetching CVs to determine if a user has already created one. The main goal is to restrict ac ...

javascriptangulartypescriptrxjs

Creating a Parameter List for nested navigators with v5: Key steps to follow

If I have two navigators structured like this: export type RootStackParamList = { Bootstrap: undefined; Login: undefined; MainApp: undefined; }; export type MainTabsParamList = { Explore: undefined; Profile: undefined; }; const MainTabs = crea ...

typescriptreact-nativereact-navigation

Dealing with documents in Django Rest Framework

For my Angular + Django project, I am looking to add files to the Ticket model. Which field should I use for this – FileField? class Ticket(models.Model): titulo = models.CharField(max_length=100, blank=True) estagio = models.ForeignKey(Estagio, ...

djangoangulardjango-modelsdjango-rest-frameworkdjango-views

The Angular Password Strength Extension will display an error message if the password strength is below 100

It's frustrating to keep trying different methods to achieve a simple task. I have a reactive form and all I want is to display an error if the password strength is not 100, indicating that it does not meet all the requirements. I can easily access t ...

angularangular-material

Retrieving the value of a variable within an object using an Observable

Can someone help me figure out how to assign a variable to a value inside an object in an Observable in my typescript file? I can retrieve the variable's value in my HTML file, but I seem to be missing something crucial. I believe the solution may inv ...

angulartypescript

Obtain data from a local JSON file using the http.get() method in Angular 2

I am attempting to utilize the http.get() method in Angular 2 to load a local JSON file. I followed a suggestion from Stack Overflow that involves modifying my app.module.ts: In this example, I have imported the HttpModule and the JsonModule from @angular ...

javascripthtmljsonangularhttp

Issue with NgRx Testing: Callback in subscribe method fails to update during testing

I am currently working on testing a component that is responsible for editing shopping list items. Upon first loading, the component receives state values through store.select, which are: editedIngredient: null, editedIngredientIndex: -1 Based on these ...

angularunit-testingrxjskarma-jasminengrx

In TypeScript, what specific type or class does a dynamically imported module belong to?

Can someone assist me in determining the type of an imported module in TypeScript? Here is my query: I have a module called module.ts export class RSL1 {}; Next, I import it into my index.ts using the following code: const script = await import('mod ...

typescript

Angular components are persisting instead of being destroyed

When navigating to a new page in my Angular application, I've noticed that the component from the previous page remains in memory instead of being destroyed. This results in a new instance being created when I navigate back to that page. The applicat ...

angularwebpackrouteswebpack-dev-server

Saving data from a one-to-one relationship using TypeORM and NestJS in a socalled way is a breeze - here's how you

When working with TYPEORM, I have a requirement to create two entities in the database: one for the user and another to store tokens. However, I face a challenge when trying to fill both entities simultaneously during the user creation process. Can someone ...

node.jstypescriptormnestjstypeorm

Confirm that the string is in the correct JavaScript Date format

I'm encountering an issue with validating the specified string obtained from the new Date() Object. "2020-10-06T14:23:43.964Z". I anticipate receiving either this particular input format or a new Date(). My aim is to create something that ca ...

javascripttypescriptdatevalidation

Standard layout for a project with equally important server and client components

We are in the process of developing an open-source library that will consist of a server-side component written in C# for Web API, meta-data extraction, DB operations, etc., and a client-side component written in TypeScript for UI development. Typically, ...

typescriptgitasp.net-core.net-core

Include the request model as a parameter

I'm encountering an issue when trying to pass a model as a parameter to an API, resulting in the following error: Type 'string' is not assignable to type 'AVAFModel'. submitAvafDetails(): Observable<any> { this.avafBcmsV ...

angulartypescript

Converting JSON Data to CSS Styles in Angular

Currently facing a challenge that has left me a bit stumped... I'm currently developing an Angular application that requires certain fields to be colored based on values stored in an XML file on the server. These colors are configured through an exter ...

javascriptcssangulartypescript

PAYEE_ACCOUNT_RESTRICTED: Restrictions have been placed on the merchant account

Currently working on integrating a PayPal payment gateway into an Angular website. Testing with sandbox client ID and secret ID has been successful, but upon switching to live credentials, I encountered the following error: Uncaught Error: PAYEE_ACCOUNT_RE ...

angularpaypalpaypal-sandboxpaypal-rest-sdk