Support overriding selectors of directives on import.

[mhevery]

It should be possible to override the selector of a component on import.

@Decorator({
  selector: 'some-selector'
})
class Directive {}

@Component(...)
@Template({
  directives: [
    new DirectiveBinding({key: Directive, selector: 'other-selector')
  ]
})

PROBLEMS

• this would make it hard to know all selectors statically, as it requires execution of code to know what the selector is.

[PatrickJS]

why not something more declarative
Directive.selectorAs('other-selector')
or something like

@Component(...)
@Template({
  directives: [
    Directive.selectorAs('other-selector').templateUrlAs('other.html')
  ]
})
export class Cmp {
}

define overwrites in the prototype
or

@Component(...)
@Template({
  directives: [
    Overwrite(Directive)
      .component({ selector: 'other-selector' })
      .template({ url: 'other.html' })
  ]
})
export class Cmp {
}

create a container but then the container needs to know the types of annotations so what if you can just annotate the container which will overwrite the Directive

@Component(...)
@Template({
  directives: [
    @Component({ selector: 'other-selector' })
    @Template({ url: 'other.html' })
    Overwrite(Directive)
  ]
})
export class Cmp {
}

I'm not even sure if that's possible or even if that is something people want since it's even more code but its pretty simple to reason about why that works perhaps.

Should there be a way to define a suite of directives? or at least best practice

import {Component, Template, directivePrefixer} from 'angular2/angular2';
import {button} from 'material-directives/suite';
// prefix helper in suite or angular itself
import * as ngMaterial, {prefix} from 'material-directives/suite';

@Component(...)
@Template({
  directives: [
    prefix('ng', ngMaterial) // or built in helper from ng2 as directivePrefixer
  ]
})
export class Cmp {
}

[mhevery]

@gdi2290 your examples don't work in practice. :-( It has to do with types of objects which need to be created to satisfy both Dart and JS.

prefix idea does not work with selectors. For example input[type=text][required] What exactly should be prefixed? That is why we are just going for replacing the selector outright.

[PatrickJS]

oh that's right, I'm still thinking of selectors as element only. no worries I should probably learn a bit more about Dart to figure something that works for both. DirectiveBinding is totally fine

[PatrickJS]

@mhevery can we revisit this? I would like for folders to export a namespace for example

app/
  home/

index.ts

import {OverWrite} from '@angular/common';
import {IndexComponent} from './Index.component'
export const HomeComponent = new NameSpace({
  component: IndexComponent,
  prefixSelector: 'home' // home-index
});

the idea is to keep files relative as much as possible so we can potentially remove the developer having to write out the namespace

[mhevery]

Will not implement.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}