Ways to implement modifications in child component through parent?

In my Angular application, I have a file upload feature where the file upload component is a child component and the app component serves as the parent component.

The app.component.html (Parent) contains a single line of code that calls the child component like this:

<app-profile-image></app-profile-image>

I am unable to make any changes to the child component in my actual application, as it is a library and I do not have access to its code.

Here is a working example: https://stackblitz.com/edit/angular-file-upload-preview-6f4o8w

In the child component (for reference), you can see:

<h4 class="success-message" *ngIf="url"> Uploaded Successfully </h4>

This message is displayed only if the profile picture has been successfully uploaded, otherwise it does not appear..

Currently, the success message is visible only when the user hovers over the image again after uploading. This may result in users not realizing that their image was successfully uploaded unless they hover over the image once more.

So, my question is how can I display the success-message below the profile image in the parent component (app.component) immediately after the file is uploaded, without requiring the user to hover over the image again.

I would appreciate any guidance on how to achieve this without making any changes to the child component.

javascriptangulartypescriptinputangular5

Answer №1

To better showcase the functionality of the child component, it is advisable to display it directly. This approach will not only streamline everyone's efforts but also provide a clearer understanding of how the components interact. In the given example, utilizing a reference variable for the child component within the parent component can achieve the desired outcome.

<app-profile-image #iAmNotReal></app-profile-image>
<h3> Success message can be displayed here </h3>

<b *ngIf="childComp?.url">Picture uploaded successfully</b>

export class AppComponent  {
  @ViewChild('iAmNotReal') childComp;
}

Explore the code demo here

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

Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...

javascriptjqueryhtmlcssdrag-and-drop

Is a finished callback needed for .on('xxx') event?

On my dashboard page, I am currently retrieving the top 25 comments and displaying them using the following code: fba.orderByChild('when').limitToLast(25).on('child_added', function (d, c) { stuff }); However, the function is called f ...

javascriptfirebase

Exploring the fundamentals of JavaScript within the context of Express.JS

Can you please explain the distinction between these two blocks of code in JavaScript? app.get("/api/products/1", (req, res) => { const singleProduct = products.find((product) => { product.id === 1; }); res.json(singleProduct); }) ...

javascriptnode.jsexpressbackend

The ng-change functionality of Angular radio buttons only functions correctly the first time it

I am struggling to comprehend why the angular ng-change function is only being called on the first click. Take a look at this example: http://jsfiddle.net/ZPcSe/5/ The function in the provided example is triggered every time the radio selection is change ...

javascriptangularjs

Use .empty() method to remove all contents from the tbody element after creating a table

Currently, I am working on a project where I am creating a drop-down list to assist users in selecting media and ink for their printers. The goal is to then generate a table displaying the selected results. While I have managed to successfully generate the ...

javascriptjqueryhtmljspdf

The file_get_contents() function encountered an issue as the content type was not specified, leading to it assuming

I am currently working on a project using PHP and JavaScript. I need to call an API from the camera using PHP code. I am using the file_get_contents function and Post request for this purpose. Below is the code snippet: $value = $_POST['TakeNewPic&ap ...

javascriptphpajaxrequest

How to send a file to the browser in PHP without making it accessible to the web server

Is there a way to send a file located outside the web server root directory to the browser using PHP code and stream it out to the client? I need the file on the client side to open only when a user clicks on an "open" button or link. I plan to call a Jav ...

javascriptphp

Angular Js powered admin control panel

Explore the SB Admin Angular by Start Angular My current project involves setting up an admin dashboard on a Windows system. However, I have encountered some issues during the installation process using npm install An error message can be found here ...

javascriptangularjsnode.jsnpmnpm-install

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

I've been developing with Angular 7, trying to display a <div> ... </div> based on multiple values that I declared as : Boolean = false; in the .ts file. These values are updated in ngOnInit, but for some reason, the page keeps redirecting ...

javascriptangulartypescriptangular-directiveangular-ng-if

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

There seems to be an issue with the compatibility between typescript and the current version (4.17.14) of the express-serve-static

Using "@types/express-serve-static-core": "4.17.13", the augmentation of express-serve-static-core is functioning properly: import { Request, Response, NextFunction } from 'express' import { PrismaClient } from '@prisma/c ...

typescriptexpresstypes

Passport JS fails to pass req.user data to Angular Controller

Currently, I am in the process of developing an application that utilizes an Express/Node backend along with Angular JS for the front end. This stack is fairly new to me, and I have been struggling with retrieving data in an Angular Service + Controller. ...

javascriptangularjsnode.jsexpress

What is the best way to retrieve the value from a PHP request?

I am encountering an issue with a multiselect form field named properties[]. When I attempt to retrieve the values in my controller using dd($request->get('properties')), it gives me ["1,2"]. However, trying to access the first ele ...

javascriptphpajaxlaravel

Saving an HTML5 canvas image to an MSSQL varbinary(max) field: A step-by-step guide

SAVING CANVAS IMAGE AS BASE64 STRING TO HIDDEN FIELD This script binds the base64 string to a hidden field on click event. save.addEventListener('click', function (event) { var dataUrl = canvas.toDataURL(); $('txtbx').val(dataUrl) ...

javascriptsqlasp.netvb.nethtml

Tips for concealing items on a website within a WebView

Is it possible to hide the header element with the search bar and logo when loading this page on a Webview? I'm not familiar with JavaScript, so is there a way to achieve this? The section I am looking to conceal ...

javascriptandroidhtmlandroid-webview

JSX is a powerful tool that revolutionizes the way we structure our front-end components. One of the most

I'm currently facing an issue while attempting to create a custom component that utilizes a looping array to conditionally render different elements. In this component, I have special classNames that help generate a grid with 3 elements per row, regar ...

javascripthtmlreactjsjsx

No action when clicking JQuery-ui Dialog button on IE11

I created a form using the following HTML structure: <div id="dialogGlobal" title="About You"> <form> <fieldset style="border: none;"> <ul style="list-style-type: none; padding-left: 0px"> <li><lab ...

javascriptjqueryhtmlinternet-explorerjquery-ui-dialog

Utilizing Typescript with Angular CLI and Express/Node concurrently in a project: A Comprehensive Guide

Currently, I am in the process of creating a basic MEAN project structure with the Angular CLI. Here, you can find an overview of the folder setup along with the tsconfig.json file. https://i.sstatic.net/VvPpU.jpg Presently, the server code resides in th ...

node.jsangularexpresstypescriptangular-cli

Tips for utilizing a nested Map in a React component using the provided dataset

There is data being retrieved from an API [ { title: "Lesson 1", topics: [ "Topic 1", "Topic 2", "Topic 3" ] }, { title: "Lesson 2", topics: ...

javascriptreactjsarraylistmaterial-ui

Using the return statement to set a value from a callback function in TypeScript

As I retrieve data from an array of class People, each person has an attendance list represented by Observable<any[]>. // Defining the Person class class Person { id: number; name: string; attendance: Observable<any[]>; // Represents ...

javascriptangulartypescript