How to mark a component selector as deprecated?

Question

I have a component

@Component({
  // todo the app-old-selector selector must be removed in the next version
  selector: 'app-new-selector,app-old-selector',
  templateUrl: './component.html'
})
export class Component {
}

What is the best way to inform a developer that app-old-selector is deprecated?

Answer 1

Probably you can write something like this inside your component code:

import { Component, ElementRef } from '@angular/core'

@Component({
 selector: 'app-new-selector,app-old-selector',
 templateUrl: './component.html'
})
export class YourComponent {
    constructor(elem: ElementRef) {
        const tagName = elem.nativeElement.tagName.toLowerCase();
        if (tagName === 'app-old-selector') {
           console.warn('message');
        }
    }
}

It means that we simply compare the tag name of currently started component with the string representing deprecated value. If they are equal - it means that you now need to inform developer.

Here is a working Stackblitz example. Feel free to run it with console opened.