question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

docs: Style Guide's "Directive selectors" doesn't mention prefixing selectors

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In the Directive selectors section of the Style Guide, nothing is mentioned about prefixing selectors for name spacing.

However, in the Guide for Write a structural directive, in the second to last paragraph, you can find the following:

The directive attribute name should be spelled in lowerCamelCase and begin with a prefix. Don’t use ng. That prefix belongs to Angular. Pick something short that fits you or your company. In this example, the prefix is app.

This is not mentioned in the style guide. Worse, Angular’s directives seem to only be prefixed with ng when it’s a “single word” directive—ngForm—but they are not prefixed with they are multiple words—formControlName.

Expected behavior

The Style Guide should make a recommendation about prefixing or not prefixing directive attribute names. I would be more than happy to submit a PR to clarify the issue in the Style Guide once I receive direction. 👍

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (16 by maintainers)

github_iconTop GitHub Comments

2reactions
petebacondarwincommented, Feb 23, 2018

I have to admit I am not sure. I would imagine that a number people (and maybe tools) link through to these styles, so perhaps the numbering should stay stable.

2reactions
shaungradycommented, Feb 19, 2018

So if I’m understanding correctly, this is how it should be reorganized:

Naming

  • Component selectors
  • Component custom prefix
  • Directive selectors
  • Directive custom prefix

Components

  • ~Component selector names~

In Naming, I think it makes sense for the Component section to appear before the Directive section as components are more common. Also, renaming Custom prefix for components to Component custom prefix keeps it visually connected to the preceding Component selectors.

If that sounds good I’ll submit a PR with those changes. 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular coding style guide
Looking for an opinionated guide to Angular syntax, conventions, and application structure? Step right in. This style guide presents preferred conventions ...
Read more >
Angular Directive Tutorial With Example | Custom Directives
This blog will introduce you to Angular Directive with sample codes for better understanding. You will also learn about Custom Directives in ...
Read more >
CSS Guidelines (2.2.5) – High-level advice and guidelines for ...
CSS Guidelines is a document by me, Harry Roberts. ... more recyclable, doesn't have any dependencies, and has much better Selector Intent.
Read more >
Developer Guide: Directives - AngularJS: API
Similar to the terminology used when an element matches a selector, ... However, since HTML is case-insensitive, we refer to directives in the...
Read more >
What is the difference between component and directive?
Basically there are three types of directives in Angular2 according to documentation. Component; Structural directives; Attribute directives ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found