Communicating Data from Parent to Child Components in Angular 2 RC1 Using Input Binding

Since upgrading to RC1, I'm running into some trouble with input binding. Here's the code snippet for the view:

<form class="form-inline">
    <div class="form-group">
        <select id="limitControl" class="form-control" 
                [(ngModel)]="limit" (change)="limitChanged($event)">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="0">All</option>
        </select>
        <label for="limitControl"> {{recordType}} per page</label>
    </div>
</form>

This is the view template for the following component:

@Component({
    selector: 'limiter',
    templateUrl: 'frontend/common/limiter/view.html',
    styleUrls: ['frontend/common/limiter/style.css']
})

export class LimiterComponent {
    limit: number = 10;

    @Input() recordType: string;
    @Output() limitChangedEvent = new EventEmitter<number>();

    limitChanged($event) {
        this.limitChangedEvent.emit($event.currentTarget.value);
    }
}

The parent component calls it like this:

<limiter (limitChangedEvent)="limitChanged($event)" 
         [recordType]="Campaigns"></limiter>

It seems that "recordType" is not getting passed into the child component properly. Any suggestions on how to fix this?

Answer №1

Would you mind attempting it in this manner instead?

export class LimitComponent {
        limit: number = 10;

        @Input('record-type') recordType: string;
        @Output() limitModifiedEvent = new EventEmitter<number>();

        modifyLimit($event) {
            this.limitModifiedEvent.emit($event.currentTarget.value);
        }
    }

Containing Component:

<limit (limitModifiedEvent)="modifyLimit($event)" 
         record-type="Sales"></limit>

Answer №2

It seems like the issue may be due to differences in naming conventions. Take a look at the Input documentation here. You'll notice that the documentation uses camelCasing for DOM binding, while you are using hyphens instead.

Instead of the current code:

<limiter (limitChangedEvent)="limitChanged($event)" 
         [recordType]="Campaigns"></limiter>

Try changing it to:

<limiter (limitChangedEvent)="limitChanged($event)" 
         record-type="Campaigns"></limiter>

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

Angular: monitoring changes in HTML content within a Component or Directive

I have a situation where I am retrieving HTML content from a REST endpoint using a directive and inserting it into a div element using [innerHTML]. Once this HTML content is rendered, I would like to manipulate it by calling a global function. My approach ...

Issue encountered with express-jwt and express-graphql: TypeScript error TS2339 - The 'user' property is not found on the 'Request' type

Implementing express-jwt and graphql together in typescript has been a challenge for me. import * as express from 'express' import * as expressGraphql from 'express-graphql' import * as expressJwt from 'express-jwt' import s ...

Angular component showcasing the usage of a nested input-group

I have developed an input component and a datepicker component in Angular. The input component generates the appropriate input tag based on the type parameter, whether it's text, number, etc. Meanwhile, the date picker is another component that contai ...

Transform data into JSON format using the stringify method

I am facing an issue with my TypeScript code where I need to retrieve specific information from a response. Specifically, I want to output the values of internalCompanyCode and timestamp. The Problem: An error is occurring due to an implicit 'any&apo ...

Customize your Kendo Chart in Angular2 by selecting the axis for your data

I need help creating a scatter chart with two separate datasets that have different Y-Axis How can I make sure the second series uses the second Y-Axis in the chart? <kendo-chart [title]="" style="height:290px"> <kendo-chart-series> < ...

Developing a hybrid application with .Net Core and Angular 2 is an achievable task

https://i.sstatic.net/hWlHp.png Currently, I am working on developing an application that involves utilizing .net core and angular2 technologies. Is it possible to integrate an angular component within Razor view Pages seamlessly? ...

Angular Authentication Functionality

I need to create a loggedIn method in the AuthService. This method should return a boolean indicating the user's status. It will be used for the CanActivate method. Here is a snippet of code from the AuthService: login(email: string, password: string) ...

Ways to retrieve data from ngrx and display it in a component file

I have recently incorporated the ngrx library into my project to create a more dynamic model for handling data. After setting up my actions, reducers, and effects files, everything seems to be working as intended because I can observe the populated model w ...

Circular dependency has been identified in Typescript as services are mutually calling each other

Within my application, I have 2 key service components: PromiseService.service.ts (which manages defer calls and asynchronous calls) @Injectable() export class PromiseService { constructor(private staffservice: StaffService) {} defercall(asyncCall ...

Retrieving information from a child modal window in an Angular parent component

In the scenario where there is data in two tables on the left and right sides, a modal popup window will open when a user clicks a link from the parent component. Upon selecting a radio button from the window, it should correspond to the selected link in t ...

Unexpected INTERNAL error encountered with Firebase's Cloud Function update

Currently, I am immersed in a project involving Vue.js 3, Typescript, and Firebase. However, while attempting to integrate new cloud functions, I came across an unexpected issue: Failed to load resource: the server responded with a status of 500 () Un ...

How is it that the callback method in the subscribe function of the root component gets triggered every time I navigate between different pages within the application?

I am currently using Angular 10 and have developed a server that returns an observable: export class CountrySelectionService { private _activeCountry = new BehaviorSubject(this.getCountries()[0]); public getActiveCountryPush(): Observable<CountryS ...

Using HttpClient to post data to Django backend for seamless information transfer

Having trouble sending data from my Angular front end to my Django backend. I've triple-checked the code on the frontend... const post_data = { email: form.value.email, password: form.value.password } const headers = new HttpHeaders({ 'Con ...

Leveraging TypeScript to share information between directives in AngularJS through asynchronous calls

Although I've found some scattered information on how to tackle this issue, I haven't been able to find a solid solution. In my AngularJS application, I have an asynchronous call that fetches data from a server and I need to store it in a variab ...

Creating dummy objects from a specific data type in Typescript for the purpose of testing

I'm exploring ways to streamline the creation of mock data for unit testing within an Angular solution. Currently, I am defining interfaces such as: export interface ReferenceDataItemCommon { codeDescription?: string; code: string; deleted?: boo ...

Generating a hierarchical structure in Angular by converting a flat array into a Tree array

I am faced with the challenge of creating a tree Array that can be used in the primeng tree component. However, I am receiving a flat array from the backend. Here is an example of the data I receive: {name: 'teste', previousName: 'fathernam ...

Converting TypeScript query string values into GUIDs

I'm currently working on a project that requires me to retrieve a string value (GUID) and convert it into a GUID. The query string format is already in GUID, but when getting the value from the query string using AngularJS and TypeScript, it returns ...

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

One of my challenges involves managing a div that is repeated using *ngFor in Angular. This results in multiple divs on the page, each containing collapsible fields that can toggle. Essentially, I have nested collapsible fields within other collapsible fie ...

Exploring the power of query parameters in Ionic 4

Currently, I am in the process of transitioning a web-based Ionic 3 project to Ionic 4. Upon scanning a QR code, a page is supposed to open with a URL structure like this: domain.com/qanda/pwa/home?user=simon&skill=ionic&role=Admin&Table=132 ...

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

I have a collection of .svgs that I exported from Sketch (refer to the sample below). These icons are registered in the MatIconRegistry and displayed using the mat-icon component. However, I've observed issues with icons that utilize masks in Sketch ...