Installation

npm install angular-yandex-maps-v3
npm install @yandex/ymaps3-types --save-dev

Version compatibility

| Angular version | Library version | | ------------------ | --------------- | | v20 | v20.x | | v16, v17, v18, v19 | v19.x |

Usage

component.html

<div class="container">
  <y-map
    [props]="{
      location: {
        center: [-0.127696, 51.507351],
        zoom: 10,
      },
      theme: 'dark',
    }"
  >
    <y-map-default-scheme-layer />
  </y-map>
</div>

component.css

.container {
  width: 1000px;
  height: 500px;
}

tsconfig.json

{
  "compilerOptions": {
    "skipLibCheck": true,
    "types": ["@yandex/ymaps3-types"]
  }
}

skipLibCheck must be set to true because @yandex/ymaps3-types uses both Vue and React typings. If you do not enable this option, you will not be able to build the application.

types ensure you can access ymaps3 globally without importing it.

Standalone

component.ts

import { Component } from '@angular/core';
import { YMapComponent, YMapDefaultSchemeLayerDirective } from 'angular-yandex-maps-v3';

@Component({
  standalone: true,
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
})
export class AppComponent {}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideYConfig, YConfig } from 'angular-yandex-maps-v3';

const config: YConfig = {
  apikey: 'API_KEY',
};

export const appConfig: ApplicationConfig = {
  providers: [provideYConfig(config)],
};

SCAM

app.module.ts

import { NgModule } from '@angular/core';
import {
  YConfig,
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  provideYConfig,
} from 'angular-yandex-maps-v3';

const config: YConfig = {
  apikey: 'API_KEY',
};

@NgModule({
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
  providers: [provideYConfig(config)],
})
export class AppModule {}