Angular custom tag not rendering and executing function

Question

I have a custom tag in html. In my next.component.ts file I have,

@Component({
  selector: 'nextbutton',
  template: ` <button (click) = "nextfunc()">Next</button> `
})

export class NextComponent{

  nextfunc() {

==>>my app.component.html file

<div>
<!--other tags-->
<next-button></next-button>

</div>

I am not able to render the button and access the nextfunc()

===>>My app.module.ts


    import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
import { NextComponent } from './next.component';


@NgModule({
  declarations: [
    AppComponent,
    NextComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }

===>>my next.component.ts

    import { Component } from '@angular/core';

@Component({
  selector: 'nextbutton',
  template: ` <button (click) = "nextfunc()">Next</button> `
})

export class NextComponent{

  nextfunc() {
     //do something
  }
}

change the selector to `nextbutton to next-button` – sibabrat swain Oct 17 '19 at 11:27 — sibabrat swain, Oct 17 '19 at 11:27
it worked. thanks. Maybe the localhost rendering was slow – krishna Oct 17 '19 at 12:50 — krishna, Oct 17 '19 at 12:50

Mustafa Kunwa · Accepted Answer · 2019-10-17T10:53:43.073

2

Your Selector in Directive/Component is nextbutton while you are using tag as

 <next-button></next-button>

Either change your Selector to next-button or change tag to nextbutton

edited Oct 17 '19 at 10:53

answered Oct 17 '19 at 10:45

Mustafa Kunwa

821
1
9
19

1

it worked. thanks. Maybe the localhost rendering was slow – krishna Oct 17 '19 at 12:50

Angular custom tag not rendering and executing function

1 Answers1