Angular 2.0. Difference @View @Component

Question

Hi. I'm new to Angular. I'm testing Angular 2.0.

I read the tuto here and the guide here. In the tuto, the template is specified in the @Component annotation whereas in the guide it is in the @View annotation. So I was wondering what are the differences between the two approaches ? I looked up in the api preview but the explanations were not clear.

There's no real difference. [`@View is just optional`](https://github.com/angular/angular/pull/4566) — Eric Martinez, Oct 28 '15 at 21:10
Please have a look [here](http://stackoverflow.com/a/40215048/1592107) — Shiv, Oct 24 '16 at 09:33

score 25 · Accepted Answer · edited Apr 07 '16 at 10:40

25

Update

@View() was removed (I think in beta.13, the CHANGELOG.md doesn't mention it though).

Original

There are no differences between them. It's just sugar that you can specify all view configuration into Component so there's no need to import View decorator.

But at the same time there's a need to remain View decorator exist, because it allows us to use different views for the same component depending on language or media type. For example:

@Component(/* ... */)
@View({
  media: 'desktop',
  template: 'Template for desktop'
})
@View({
  media: 'mobile',
  template: 'Template for mobile'
})
extends class Component() {}

This feature is not implemented yet.

edited Apr 07 '16 at 10:40

Günter Zöchbauer

623,577
216
2,003
1,567

answered Oct 28 '15 at 21:19

alexpods

47,475
10
100
94

1

This may not hold true in future as per Igor in his comments in https://github.com/angular/angular/pull/4566 "the view switching logic will be defined elsewhere. likely via DI. we'll see." – Chandermani Oct 29 '15 at 03:05
does one component has more than one view as you described in the answer ? – Pardeep jain Oct 29 '15 at 05:31
@alexpods also this is not working for me 'media type' or i m not understand properly what you said. will you please provide me the demo(plnkr or fiddle) of your working code using two `@view` in the same component. – Pardeep jain Oct 29 '15 at 06:00
@Pardeepjain It's not implemented yet. I've just wanted to explain why we have separate `View` decorator and how it can be used in the future. I was relying on [this](https://github.com/angular/angular/issues/596) and [this](https://github.com/angular/angular/pull/4566) github issues. Sorry for confusion. – alexpods Oct 29 '15 at 12:23
okay i thought this is working feature of the angular2. btw thnx for clearing difference between component and view decorators. – Pardeep jain Oct 29 '15 at 15:11

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

As said by @Alexpods in answer and @Eric in comment before when angular2 is in alpha @view is juts optional because all the properties in the @view annotation is also included in the @component annotation so @view is just sugar that you can specify all view configuration into Component so there's no need to import View decorator.

Updated to beta

@View has been deprecated in latest release, So you can't use it.

if you are using still @view annotation it may cause producing some kind of error. so Only Component is the place that will hold the all options.

As per officials , @View metadata decorator has been deprecated in beta.10 release.

Shiv · Answer 3 · 2016-10-25T05:41:08.827

2

As per the ChangeLogs of Angular v2.0.0-beta.11, it is mentioned under breaking changes that @View() annotation (previously deprecated) has been removed. Apps should use the @Component() decorator instead.

Please have a look in Change logs of Angular2 here.

edited Oct 25 '16 at 05:41

answered Oct 24 '16 at 09:32

Shiv

3,069
1
24
17

score 1 · Answer 4 · answered Feb 26 '17 at 23:28

First of all, this was deprecated and now fully gone!

2.0.0-beta.10 (2016-03-17): @View() annotation (previously deprecated) has been removed. Apps should use the @Component() decorator instead.

So you don't need to worry about it anymore, The @View was previously introduced because the early thinking was that there could be multiple views in a component (like a mobile view for example) and the usage was as below:

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      styleUrls: ['./app.component.scss']})
    @View({
      media: 'desktop',
      template: '<h1>tablet<h1>'
    })
    @View({
      media: 'mobile',
      template: '<h1>mobile<h1>'
    })

    extends class Component() {}

Angular 2.0. Difference @View @Component

4 Answers4

Updated to beta

Linked

Related