Display a nested component post initialization in Angular

    <ng-container *ngIf="isTrue; else notTrue">
      <app-child
        [property1]="value"
        [property2]="value"
        [property3]="value"
        (function1)="func($event)"
      ></app-child>
    </ng-container>
    <ng-template #notTrue>
     <app-child
        [property1]="value"
        [property2]="value"
        (function1)="func($event)"
      ></app-child>
    </ng-template>

I need the child component inside <ng-template #notTrue> to be initialized and rendered post the parent's afterViewInit() hook. Any suggestions on how to achieve this? Thank you.

For your information, I am working with Angular 9.

angulartypescriptangular-components

Answer №1

Within the main component of your template, you have the option to utilize AfterViewInit and assign a value of true to isTrue:

export class MainComponent implements AfterViewInit {
    isTrue: boolean;

    ngAfterViewInit() {
        this.isTrue = true;
    }
}

Answer №2

If you want your *ngIf logic to happen during the ngAfterViewInit lifecycle stage, be sure to implement it there to ensure proper execution.

Even though this approach may still lead to rendering of the ng-template before the switch triggered by ngAfterViewInit, you can prevent any rendering until after view initialization by setting a boolean flag in the class and toggling it to true within ngAfterViewInit(). Then, encapsulate both components inside an

<ng-container *ngIf="viewHasInitialized">
...app-child components...
</ng-container>

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

Firebase login success callback not getting invoked

I have set up routes, the AuthGuard, and Firebase login in my project. I am using callbacks to handle the success and failure of the Firebase login process. successCallback(signInSuccessData) { console.log("Received with Success!"); } errorCallback(e ...

angularfirebasefirebase-authentication

Mastering the Use of *ngIf with *ngFor: Best Practices for Proper Implementation

Can someone help me rewrite the combination of *ngIF and *ngFor below? I understand that my issue may be similar to others, but please know that this is different. Everything seems to be working fine. The only problem I'm facing is that the color of ...

angulartypescript

Having trouble setting up the calendar feature in my Ionic Angular application

I have a simple task at hand: creating a project for a calendar/schedule app that displays and allows editing of the schedule/division of professors in my institute on a daily basis. First off, do you have any better ideas, methods, or software suggestion ...

angularionic-frameworknpmcalendardependencies

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

javascriptreactjstypescript

What is the process for gaining entry to the environment files of a separate project?

I am working with two Angular projects. The first project is called Main, and I need to load environment files from the second project into Main. I understand that we can access assets/a.json in another project using HttpClient.get. Can someone please ad ...

angularenvironment-variables

Unable to allocate FormArray

Just delved into learning Angular and encountered a snag. I am trying to add and remove textfields for a form, so I attempted the following code in my component.ts file: import {FormBuilder, FormGroup, FormArray } from '@angular/forms'; This is ...

typescriptangular5

Angular 5 custom dropdown menu

Currently, I am utilizing the ng-select component available at https://github.com/ng-select/ng-select. However, there are instances where the content of the dropdown is too lengthy. To address this issue, I have decided to shorten the string in the dropd ...

angularangular-ngselect

Managing the action that occurs when the Angular2-toaster pop-up is clicked

Currently, I am in the process of working on a project which incorporates angular2-toaster. // Display message notification this.toasterService.pop('success', `New message from ${data.sender.name} (${data.sender.hid})`, data.message); ...

angularangular2-toaster

Tips for importing a library in a TypeScript file that expands a JavaScript prototype

After following the instructions provided in this question, I am experimenting with integrating Moment.js to enhance the capabilities of the Date prototype within a TypeScript project. The process of extending the Date prototype appears successful, as out ...

typescriptimportmomentjsprototype

Managing state in a large Angular application can be quite challenging

Recently, a unique situation arose within our application that sparked my curiosity. After an extensive search for a solution, I was unable to find a definitive answer. Our application boasts over 600 modules, each with its own set of states and data. I ...

angularngrxnrwl-nx

ESLint encountered an issue: Reserved keyword 'interface' triggered a parsing error

Whenever I utilize the most recent version of eslint to initiate a project, a specific error pops up: import { ref } from 'vue' defineProps<{msg: string}>() const count = ref(0) Error message: Unexpected token )eslint Adjusting the code ...

typescriptvue.jseslint

Make sure that every component in create-react-app includes an import for react so that it can be properly

Currently, I am working on a TypeScript project based on create-react-app which serves as the foundation for a React component that I plan to release as a standalone package. However, when using this package externally, I need to ensure that import React ...

reactjstypescriptnpmbabeljscreate-react-app

Error message: "ExpressionChangedAfterItHasBeenCheckedError - encountered while using ngIf directive to hide/show a progress

My HTTP interceptor is set up to display a loading bar whenever an HTTP request is made: intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const dataStorageService = this.injector.get(DataStorageService); ...

angular

The attribute 'XXX' is not found within the type 'IntrinsicAttributes & RefAttributes<any>'

My coding hobby currently involves working on a React website using TypeScript. I recently came across a free Material UI template and decided to integrate it into my existing codebase. The only challenge is that the template was written in JavaScript, cau ...

reactjstypescriptmaterial-ui

Exploring the power of makeStyles in Material UI when combined with TypeScript

I am currently in the process of converting a JavaScript template to Typescript. Here is an example of my accordionStyle.ts file: import { primaryColor, grayColor } from "../../material-dashboard-pro-react"; const accordionStyle = (theme?:an ...

javascriptreactjstypescriptmaterial-ui

Creating a singular and distinctive string by combining two keywords

Is it possible to create a single distinct string by combining two keywords regardless of the order in which they are entered? EDIT: The keywords in question are numerical rather than alphabetical characters. The following example is merely for explanator ...

javascriptangular

Automatically pass on parameters from a universal function

If I have an object with functions that return numbers: const obj = { foo() { return 1; } bar() { return 2; } baz(num: number) { return num; } } The expected output of typeof obj would be: { foo: () => number; bar: () => number; baz ...

typescript

Angular2 - Issue with Pagination functionality

When incorporating ng2-bootstrap as a pagination component, the guide provided at () made setting up the component a breeze for me. The pagination functionality is working smoothly and meeting my expectations. However, I've encountered an issue when ...

twitter-bootstrapangularjasminekarma-jasmineng2-bootstrap

The UI elements are failing to reflect the changes in the data

In an attempt to establish communication between three components on a webpage using a data service, I have a Create/Edit component for adding events, a "next events" component for accepting/declining events, and a Calendar component for displaying upcomin ...

angulartypescriptrxjsangular6

Encountering an error in Jest with TypeScript (Backend - Node/Express) that reads "Cannot use import statement outside a module

Currently, I am in the process of developing Jest tests for a Node/Express TypeScript backend. Recently, I came across the concept of global test setup which I am integrating to streamline the usage of variables and function calls that are repeated in all ...

javascriptnode.jstypescriptexpressjestjs