Transfer text between Angular components

Here is the landing-HTML page that I have:

<div class="container">

  <div>
    <mat-radio-group class="selected-type" [(ngModel)]="selectedType" (change)="radioChange()">
      <p class="question">Which movie report would you like to see?</p>
      <mat-radio-button id="movie-a" class="Movie-type" [value]="MovieType.HORROR">Horror</mat-radio-button>
      <mat-radio-button id="movie-b" class="Movie-type" [value]="MovieType.ROMANTIC">Romantic</mat-radio-button>

    </mat-radio-group>
  </div>

    <movie-report *ngIf="showMovieReport"></movie-report>

</div>

The <movie-report> component is separate and has its own component.ts, which makes a REST Call and provides data.

I am looking for a way to pass the MovieType data to the MovieReport component. Can anyone help me with this?

angulartypescript

Answer №1

To accomplish this, you must utilize the @Input directive as shown below -

<movie-report [type]='MovieType' *ngIf="showMovieReport"></movie-report>

In order to access this data within the movie-report component, you will need to use the @Input directive 

export class MovieReportComponent {
  @Input('type') type: string;
  // Input Data becomes available in the ngOnInit lifecycle hook of the Angular component
}

For more detailed information, please see -

Answer №2

To send the chosen type of movie instead of using 'MovieType', substitute it with 'selectedType' as the input parameter. Verify if the selected value is not empty.

<ng-container *ngIf='selectedType'>
    <movie-report [type]='selectedType' *ngIf="showMovieReport"></movie-report>
</ng-container>

Inside the movie-report component:

export class MovieReportComponent {
  @Input('type') type: 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

I attempted to copy the "koa" module from my node_modules folder to a custom typeRoots directory, but it doesn

I want to use Ant Design UI, and I hope to import the script tag with the .min.js label, like this: <script src="//cdn.staticfile.org/react/15.4.1/react.min.js"></script> <script src="//cdn.staticfile.org/react/15.4.1/react-with-addons.min. ...

reactjstypescriptwebpackkoaantd

A guide on dynamically showcasing/summoning icons in react by utilizing array data

QUESTION: 1 (SOLVED!) https://i.stack.imgur.com/1M1K7.png What is the best way to display icons based on an array of data codes? const data = [{ img: '01d' }, { img: '02d' }] if(data) { data.map((item) => ( <img src={`./ ...

javascriptreactjstypescriptnext.js

What are the steps for creating a TypeScript version of a custom CKEditor5 build?

Currently, I am in the process of creating a personalized version of CKEditor5. By following the guidelines provided in the official documentation, I successfully obtained ckeditor.js. My goal now is to produce a typescript file (ckeditor.ts or ckeditor.d ...

angulartypescriptwebpacktypescript-typingsckeditor5

Can existing servers support server side rendering?

I am currently working on building a Single Page Application (SPA) using the latest Angular framework. The SPA will involve a combination of static HTML pages, server side rendering, and possibly Nunjucks templating engine. My dilemma lies in the fact th ...

javascriptnode.jsangularexpressserver-side-rendering

Angular ngFor does not display the JSON response from the API (GET request)

I'm attempting to retrieve a JSON response from my API and display the values on my Angular page using ngFor. Although I don't have any build errors, the values are not being displayed on the page. They only appear in the console when using cons ...

pythonjsonangularfastapiangular-httpclient

Extracting Information from ASP.Net Web API using Angular 4

After experimenting with the well-known Visual Studio 2017 Angular 4 template, I successfully tested the functionality of side navbar buttons to retrieve in-memory data. I then proceeded to enhance the project by adding a new ASP.Net Core 2.0 API controll ...

c#angulartypescriptasp.net-core-webapi

Is there an issue with TypeScript and MUI 5 sx compatibility?

Here's a question for you: Why does this code snippet work? const heroText = { height: 400, display: "flex", justifyContent: "center", } <Grid item sx={heroText}>Some text</Grid> On the other hand, why does adding flexDirection: "c ...

reactjstypescriptmaterial-ui

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

cssangularionic-framework

Guide to upgrading ag-grid-community from 20.1.0 to 24.1.0

I'm currently encountering some errors that I can't seem to find in the AgGrid documentation. These attributes are not mentioned anywhere, not even in the Change Log. First off, these compilation errors are popping up: ERROR in : Can't bind ...

angulartypescriptangular7ag-gridag-grid-angular

Encountering difficulties while trying to install ng2-material in Angular 2

I'm attempting to utilize a data table with the ng2-material library from ng2-material as shown below: <md-data-table [selectable]="true"> <thead> <tr md-data-table-header-selectable-row> <th class="md-text-cell">M ...

javascriptangularnpmnpm-install

Why does my Visual Studio Code always display "building" when I launch an extension?

https://code.visualstudio.com/api/get-started/your-first-extension I followed a tutorial to create a hello world extension. Why does my VSCode always display 'building' when I run the extension? Executing task: npm run watch < [email p ...

javascriptnode.jstypescriptvisual-studio-code

Is there a way to customize the active width of ngx-tooltip specifically for an edge or link?

For my project, I am trying to incorporate a ngx-tooltip on the connection between two nodes. The tooltip is functioning well for both nodes and edges, but the edge size is smaller, requiring precise mouse positioning to trigger the tooltip. <ng-temp ...

angularsvgngx-bootstrapngx-graph

Checkbox with an indeterminate state in Angular

I'm currently working on updating an AngularJS (1.5) setup where a parent checkbox becomes indeterminate if one of its children is selected, and all the children are selected if the parent is selected. My main challenge lies in converting the old ES5 ...

javascriptangularformscheckbox

Exploring how to iterate through multiple arrays simultaneously in JavaScript

I have a specific problem with processing two sets of array objects to achieve a desired output. var parts={"Glenn": [12,22,32], "Ryan": [13,23,33], "Steve K": [14], "Jerom":[15,25,35], }; var labor={ "Glenn": [12,22,32], "Ryan": [13,23,33], "Steve K": [ ...

javascriptnode.jsangulartypescriptecmascript-6

npm is unable to locate the npm-debug.log file during the initialization of npm install for Angular 2-CLI

While attempting to install an npm package for my new Angular 2 project, I encountered the following issue. npm ERR! Please include the following file with any support request: npm ERR! D:\CR_Automation_UI_POC\POC\npm-debug.log The pr ...

angularnpmnpm-debug

Introduction to React with Typescript: Greeting the World

I am attempting to create a Hello World React application with Typescript. Below is the code I have written. Method 1 works without any issues, but method 2 throws an error. Method 1 - TypeScriptComponent.tsx import React from 'react' import Re ...

javascriptreactjstypescriptwebpack

Tips on how to integrate a Twitter timeline into an Angular 6 application

I've been trying to integrate a Twitter timeline into an Angular 6 application, but I have yet to find a satisfactory solution. Here's what I've attempted so far: Inserted the Twitter generated code from 'publish.twitter.com' int ...

angular

Challenges with Type Aliases when Using Typescript with MaterialUI Icons

I am searching for a way to dynamically incorporate Material UI icons into my code based on specific strings found in a configuration file. I have come across an approach that seems promising: https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-a ...

reactjstypescriptmaterial-ui

What are some ways to streamline inline styling without having to create numerous variables?

Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...

cssreactjstypescriptstreamlit

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Issue with Generating PDF Using Angular 8, JSPDF, and JSPDF-AutoTable I am facing a challenge with exporting/generating a PDF based on an HTML grid. I need to make some DOM changes with CSS, remove toggle buttons, alter the header, etc. However, all the s ...

angulartypescriptjspdfjspdf-autotable