CODEWITHSUNDEEP
angularinputparent-child
Jeet
Jeet

Reputation: 395

How to pass the values to a reusable component using the @Input annotation?

I want to take the user input from app.component and pass these parameters to the ReusableComponent, process that input and display the result. I have a child component in the reusable component known as "mycanvas".

In the parent app.component.html:

<div>
<app-reusable-component [filename]="'assets/base1.STL'" [colorname]="'red'" [perspective]="35">
</app-reusable-component>
</div>

<div class="stl">
<mat-form-field>
  <mat-label>Name of the file</mat-label>
  <mat-hint> File path of only stl file</mat-hint>
  <input  matInput  [(ngModel)]="assets/base1.STL"  name="filename"  required>
  </mat-form-field>

  <mat-form-field>
  <mat-label>Name of the color</mat-label>
  <mat-hint> Color in string</mat-hint>
  <input  matInput  [(ngModel)]="red" name="colorname"  required>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Camera Perspective</mat-label>
    <mat-hint> values in Integer</mat-hint>
    <input  matInput  [(ngModel)]="35" name="perspective"  required>
    </mat-form-field>
  </div>

In the app.component.ts, I have imported the ReusableComponent:

import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
import {ImlStlAppComponent} from 'src/app/iml-stl-app/iml-stl-app.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit  {

  title = 'stl-app';

  constructor(){}

  ngOnInit():void{}
}

I want to pass this parameters as user input to the reusable component and accept the components with @Input annotation:

export class ReusableComponent implements OnInit {


@Input()
filename:string;
@Input()
colorname:any;
@Input()
perspective:number;

function doSomething(){}
}

In the ResuableComponent.html I have:

<div style="text-align:center">
<canvas #myCanvas id="myCanvas">
</canvas>
</div>

I think I could not able to establish the communication between the reusable component and the app component, so nothing is displayed. Could anyone please guide me?

Upvotes: 1

Views: 1909

Answers (2)

Anton Marinenko
Anton Marinenko

Reputation: 2992

First of all you should create your model for inputs. In your component for example:

export class AppComponent implements OnInit  {
  filename: string;
  colorname: string;
  perspective: string;

Then you can use this variables as models in your input and send to your custom components.

<app-reusable-component [filename]="filename" [colorname]="colorname" [perspective]="perspective">

And change your inputs:

<input  matInput  [(ngModel)]="filename"  name="filename"  required>
<input  matInput  [(ngModel)]="colorname" name="colorname"  required>
<input  matInput  [(ngModel)]="perspective" name="perspective"  required>

If you need initial value, you can initialize your model variables with it.

Upvotes: 1

AhammadaliPK
AhammadaliPK

Reputation: 3548

You can pass it from App.Component as below.

Define variables in App.Component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit  {

  title = 'stl-app';
  fileName="file.hgt";
  color="blue";
  constructor(){}

  ngOnInit():void{}
}

In app.component.html , use ReusableComponent as below

<app-resuable-component [filename]="fileName" [colorname]="color">

</app-resuable-component>

Upvotes: 0

Related Questions