CODEWITHSUNDEEP
javascripthtmlangulartypescript
Rasmus
Rasmus

Reputation: 53

Type 'Event' is not assignable to type 'string'

I'm new to angular and I was following this hero tutorial when I stumbled upon this error:

Type 'Event' is not assignable to type 'string'

I reproduced the error here.

Upvotes: 4

Views: 5088

Answers (3)

Virotti
Virotti

Reputation: 11

I'm also learning and I was going crazy because I could not follow a course on Angular due to the fact that the sample project from https://stackblitz.com does not have a module and relies on standalone components. The solution that works on 2023 for those without a module (using only standalone components) is to import FormsModule (at the beginning and at the imports section) of both the main.ts file and the component where you want to use forms, as both components need to be linked (instead of using the module file).

So you just add the import information for FormsModule to the components (ts files):

import { Component, OnInit } from "@angular/core";
import  {CommonModule} from '@angular/common'

    **import { FormsModule } from '@angular/forms';**
    
    
    @Component({
        standalone:true,
        selector: 'test',
        templateUrl:'./test.components.html',
        styleUrls : ['./test.components.css'],
        imports:[CommonModule,**FormsModule **]

Upvotes: 1

Mali Gautam H
Mali Gautam H

Reputation: 21

if you are working with standalone Components (which is angular 14 new feature ) then you have to import

form module in your components Ts file

import { Component, OnInit } from "@angular/core";
import  {CommonModule} from '@angular/common'

**import { FormsModule } from '@angular/forms';**


@Component({
    standalone:true,
    selector: 'test',
    templateUrl:'./test.components.html',
    styleUrls : ['./test.components.css'],
    imports:[CommonModule,**FormsModule **]
})

Upvotes: 1

Ismail Dinar
Ismail Dinar

Reputation: 426

You are missing the FormsModule import in your AppModule.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { HeroComponent } from "./hero/hero.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HeroComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Upvotes: 6

Related Questions