49

It looks like there is no "replace" option in new AngularJS 1.5 Component concept (like it was for directives).

What would you suggest if I want to have table row <TR> element as component? Is it not possible in terms of valid HTML?

Real example: mailBox component has mail components inside. By markup mail-box-component is table, and mail-box is tr.

<mail-box>
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail>
<mail-box>

UPD: related discussion about directives - Why is replace deprecated in AngularJS?

Community
  • 1
  • 1
Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
  • The solution is to not use markup and CSS with strict structural requirements. What does `mail` do exactly? Most likely mailbox has to absorb its functionality and the whole template. – Estus Flask Feb 09 '16 at 11:40
  • I want each mail be the separate component – Stepan Suvorov Feb 09 '16 at 12:44
  • That's the work for directives, not components. Components are meant to be self-contained UI widgets, read more on Web Components. – Estus Flask Feb 09 '16 at 13:08
  • 1
    @estus though I generally agree with the sentiment, that's not necessarily true, think of the option element that doesn't stand alone without a select element around it – Ruan Mendes Feb 09 '16 at 13:22
  • Don't use `tr`. Problem solved. A list of mails is not tabular data, so using `table` is semantically wrong anyway. – a better oliver Feb 09 '16 at 14:30
  • @abetteroliver what is tabular data if not comparable sets of data of the same types that would be more clearly represented in a grid? No, email inboxes don't always/often use a grid layout, but sender, timestamp, subject, summary definitely fit most people's understanding of tabular data. – maurice Mar 17 '23 at 16:31
  • @maurice _"The HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data."_ [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) _"tabular: of, relating to, or arranged in a table specifically : set up in rows and columns"_ _"No, email inboxes don't always/often use a grid layout"_ If it's not stored as a table and not presented as a table, it is not a table.
     – a better oliver Apr 02 '23 at 09:57

1 Answers1

25

This is not possible the-angular-way anymore since the replace: true flag has been deprecated

Why is replace deprecated in AngularJS?

the replace: true flag had come up with more problems than solutions which is why it was removed. therefore you can not build directives in such a way anymore and provide valid table-tr-td markup.

However, there are two reasons why this is not as bad as it looks:

  1. you can do everything you want to do without table, tr, td, etc. just using elements like div, span, etc. and some css on it

  2. web-components (and directives were a first attempt to simulate them) are not meant to represent such small fragments of the markup. they are more thought of as a fully functional component actually doing something. so whatever you want to do with your tr that you think it's worth building an element-directive around it, it probably isnt.

Maybe, what you can do is using an attribute-directive instead:

<tr my-mail-directive></tr>

and your my-mail-directive does the magic on the tr element

Community
  • 1
  • 1
Patrick Kelleter
  • 2,631
  • 1
  • 13
  • 19
  • 3
    Attributes are also not possible for components, if I understand the docs correctly. "restrict: No (restricted to elements only)" – bersling Oct 20 '16 at 16:19
  • 2
    @PatrickKelleter the wording you are using only causes confusion. Components are NOT directives, directives ARE NOT part of Angular2 plain and simple, to say a component is a directive only confuses people – Brian Ogden Nov 18 '16 at 17:50
  • 3
    @BrianOgden what i said is that the OLD elment-directives (ng1, restrict:' E') are now known as components in ng2 - while the OLD attribute-directives (ng1, restrict: 'A') are not known as directives in ng2. and YES - there ARE directives in ng2. saying that directives are not part of ng2 is wrong - plain and simple. check out the documentation for it https://angular.io/docs/ts/latest/guide/attribute-directives.html – Patrick Kelleter Nov 22 '16 at 17:32
  • I must say I moved back to a table/tr/td setup for a page where I needed .... a table :). Any it works quiet nice to define the width once in the TH and all TD's follow suit. I find that still harder to do with Divs. You have to use a bit more CSS magic I guess. – Mattijs Dec 24 '16 at 07:54
  • **There are directives in angular 2** just so that's redundantly clear. – Augie Gardner Dec 30 '16 at 14:25
  • 1
    When you print a page, a browser repeats the thead on the top of all pages. How do you achieve that with divs? – nawlbergs Sep 06 '17 at 14:11
  • @nawlbergs without checking, I'd say changing the display property of an element to thead should make it behave like a thead. It's just a bit more complicated to simulate tables using other element as you'll have to replicate display properties of the td/tr/thead/tbody/table. – Loïc Faure-Lacroix Apr 17 '18 at 13:25