Skip to content
This repository has been archived by the owner on Jan 6, 2025. It is now read-only.

fix(api): check platform before accessing nativeElement #418

Closed
wants to merge 2 commits into from

Conversation

cupidi
Copy link

@cupidi cupidi commented Sep 13, 2017

Style, Class and ImgSrc now check if the platform is browser before accessing nativeElement properties.

Fixes #408

ThomasBurleson added a commit that referenced this pull request Sep 13, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
@ThomasBurleson
Copy link
Contributor

Closed to use #419.

ThomasBurleson added a commit that referenced this pull request Sep 13, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this pull request Sep 13, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this pull request Sep 14, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this pull request Sep 15, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this pull request Sep 15, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this pull request Sep 15, 2017
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

StyleDirective throws renderer error '_ngEl.nativeElement.getAttribute is not a function'
3 participants