Why isn't the input value being transmitted to the child component in Angular 5?

I have a dashboard and skills components and I am trying to pass the type from dashboard to be used in skills. However, I am encountering an error stating it is undefined.

Dashboard Component:

export class DashboardComponent implements OnInit {
  type: string;
  constructor() { }

  ngOnInit() {
    this.type = "Agent";
  }

The Skills component is as follows:

export class SkillComponent implements OnInit{
 @Input() type: string;  
 constructor() { }
  ngOnInit() {
  console.log(this.type);
}

Dashboard component template:

<div class="container">
  <div class="row">
    <app-skill-list [type]="type"></app-skill-list>
  </div>
</div>

Answer №1

In order to specify the type, you must utilize the annotation [type]

<app-skill-list [type]="type"></app-skill-list>

Answer №2

To transfer the value of a variable from one component to another, you can utilize queryParams.

Simply incorporate the [queryParams] directives with routerLink to send queryParams.

Dashboard.html

<a [routerLink] = "['/skill']" [queryParams] ="{type :[type] }">

Skill.ts

data :any;
type : any;

Export class Skill implements OnInit {

constructor(private route: ActivatedRoute) {
}

ngOnInit (){ 
  this.data = this.route.queryParams.subscribe(params =>{
    this.type = params['type']
  })
  //Now you can access it in the skill component
}
}

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

Substitute all properties of a specific type with a predetermined value in Typescript using recursive substitution

If we consider the given type structure: type Person = { name: string age: number experience: { length: number title: string } } Can we create a type like this: type FieldsOfPerson = { name: true age: true experience: { length: t ...

How to access the result without using subscribe in Angular?

I am facing unexpected behavior with a method in my component: private fetchExternalStyleSheet(outerHTML: string): string[] { let externalStyleSheetText: string; let match: RegExpExecArray; const matchedHrefs = []; while (match = this.hrefReg.exe ...

Angular syncfusion - How can I retrieve the selected series in a line chart event?

Currently, I am using the Line chart control from Syncfusion in Angular 7. While going through the documentation, I was unable to locate an event that retrieves the selected data series when clicking on a line chart series. Do you happen to know the name o ...

Is there a way to eliminate the line that appears during TypeScript compilation of a RequireJS module which reads: Object.defineProperty(exports, "__esModule", { value: true });?

Here is the structure of my tsconfig.json file: { "compileOnSave": true, "compilerOptions": { "module": "amd", "noImplicitAny": false, "removeComments": false, "preserveConstEnums": true, "strictNullChecks": ...

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component: HTML file <content-section [text]="data"></content-section> TypeScript file data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand ...

Why am I encountering this rendering issue when passing data to the ReactTable component?

The following code snippet represents the parent component containing an array of columns and data. const TransactionTable = () => { const columns = useMemo( () => [ { Header: 'DATE/TIME', accessor: &apos ...

Check for the data attributes of MenuItem in the TextField's onChange event listener

Currently, I am facing a situation where I have a TextField in select mode with several MenuItems. My goal is to pass additional data while handling the TextField's onChange event. I had the idea of using data attributes on the MenuItems for this pur ...

Is there a way to determine if a browser's Storage object is localStorage or sessionStorage in order to effectively handle static and dynamic secret keys within a client?

I have developed a customizable storage service where an example is getExpirableStorage(getSecureStorage(getLocalStorage() | getSessionStorage())) in typescript/javascript. When implementing getSecureStorage, I used a static cipher key to encrypt every ke ...

Leverage the power of TypeScript custom transformer and project reference for enhanced

I am currently working on a project that involves using both project references and custom transformers. The issue I am facing is that project references require the use of TSC for incremental compilation, but when TSC is used, the transformers are not app ...

Injecting a 'distinct symbol' into a function

I have a couple of inquiries regarding the code provided below: Can something other than an enum be passed as a Param? Is there a way to achieve more specific typing during execution of e that specifies the param key? Ideally, both of these issues can b ...

Is it possible to integrate an Angular-CLI 8 library into an Angular 2, 4, 5, 6, or 7 application without any problems? Would it be compatible

I have been developing and distributing an Angular library via NPM using custom scripts during the Angular 5 era. Fortunately, this library is free from any challenging peer dependencies and works seamlessly with Angular 5 through 8 applications. Now, I a ...

Substitute Customized Interface Type Identifier

I am working on creating a versatile function interface for functor map while respecting the provided interface. In the code snippet below, my goal is to ensure that the value of mb is of type Maybe<number>, rather than the actual type Functor<num ...

Tips for submitting a form with AngularJS version 4

I am developing a single page application using AngularJS 4. Can anyone guide me on how to submit a form upon clicking the submit button in AngularJS 4? Your help is greatly appreciated. Thank you! ...

Creating a TypeScript type that extracts specific properties from another type by utilizing an array of keys

In my TypeScript journey, I am working on crafting a type that can transform a tuple of keys from a given type into a new type with only those specific properties. After playing around with the code snippet below, this is what I've come up with: type ...

Utilizing React Typescript for Passing Props and Implementing them in Child Components

I'm currently working with React and TypeScript and attempting to pass data as props to a child component for use. However, I've encountered an error that I can't quite understand why it's happening or how to resolve it. Additionally, I ...

Navigating through React with Typescript often involves managing the process of waiting for an API call to finish

My interface structure is as follows: export interface Chapter{ id: string, code: string } Within a component, I am making an API call in the following manner: componentDidMount() { fetch("https://someapi/getchapter") .then(r ...

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...

Purge all records from a MongoDB collection using a Django backend and an Angular frontend

I successfully implemented code to add a new customer to my MongoDB collection using an Angular service method that communicates with a Django http function. Below is the code I used: const httpOptions = { headers: new HttpHeaders({ 'Content-Typ ...

Ensuring the height of the body and content div in Bootstrap 4 combined with Angular set to

Is there a way to center the <div class="card"> in the middle of the page or body? It works perfectly on a desktop browser, but on mobile view, it's not aligning properly. How can I center it using... html, body { height: 100%; background: ...

developing a collection of Material UI text fields

My goal is to construct an accordion containing several textfield mui-components. I have developed a unique render function incorporating all the essential tags and syntax for creating a text field component. Now, I am looking to generate an array of text ...