Skip to content

Commit 7526ef7

Browse files
karamhevery
kara
authored and
mhevery
committed
docs(ivy): add docs for styling priority order (angular#35066)
PR Close angular#35066
1 parent 4e9d62f commit 7526ef7

7 files changed

Lines changed: 243 additions & 91 deletions

File tree

‎aio/angular.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"packageManager": "yarn",
66
"warnings": {
77
"typescriptMismatch": false
8-
}
8+
},
9+
"analytics": false
910
},
1011
"newProjectRoot": "projects",
1112
"projects": {
@@ -192,4 +193,4 @@
192193
}
193194
},
194195
"defaultProject": "site"
195-
}
196+
}

‎aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,12 @@ describe('Attribute binding example', function () {
2525
});
2626

2727
it('should display a blue div with a red border', function () {
28-
expect(element.all(by.css('div')).get(4).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
28+
expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
2929
});
3030

31-
it('should display a div with replaced classes', function () {
32-
expect(element.all(by.css('div')).get(5).getAttribute('class')).toEqual('new-class');
33-
});
34-
35-
it('should display four buttons', function() {
36-
let redButton = element.all(by.css('button')).get(1);
37-
let saveButton = element.all(by.css('button')).get(2);
38-
let bigButton = element.all(by.css('button')).get(3);
39-
let smallButton = element.all(by.css('button')).get(4);
40-
41-
expect(redButton.getCssValue('color')).toEqual('rgba(255, 0, 0, 1)');
42-
expect(saveButton.getCssValue('background-color')).toEqual('rgba(0, 255, 255, 1)');
43-
expect(bigButton.getText()).toBe('Big');
44-
expect(smallButton.getText()).toBe('Small');
31+
it('should display a div with many classes', function () {
32+
expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
33+
expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
4534
});
4635

4736
});

‎aio/content/examples/attribute-binding/src/app/app.component.html‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,43 +27,41 @@ <h2>Attribute binding</h2>
2727

2828
<hr />
2929

30-
<h2>Class binding</h2>
30+
<h2>Styling precedence</h2>
3131

32-
<!-- #docregion add-class -->
33-
<h3>Bind to a specific class</h3>
32+
<!-- #docregion basic-specificity -->
33+
<h3>Basic specificity</h3>
3434

35-
<div class="item clearance" [class.special]="isSpecial">This class binding is special.</div>
36-
<!-- #enddocregion add-class -->
35+
<!-- The `class.special` binding will override any value for the `special` class in `classExpr`. -->
36+
<div [class.special]="isSpecial" [class]="classExpr">Some text.</div>
3737

38-
<!-- #docregion bind-syntax -->
38+
<!-- The `style.color` binding will override any value for the `color` property in `styleExpr`. -->
39+
<div [style.color]="color" [style]="styleExpr">Some text.</div>
40+
<!-- #enddocregion basic-specificity -->
3941

40-
<h3>Using the bind- syntax:</h3>
42+
<!-- #docregion source-specificity -->
43+
<h3>Source specificity</h3>
4144

42-
<div bind-class.special="isSpecial">This class binding is special too.</div>
43-
<!-- #enddocregion bind-syntax -->
45+
<!-- The `class.special` template binding will override any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
46+
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding>Some text.</comp-with-host-binding>
4447

45-
<!-- #docregion direct-class-binding -->
46-
<h3>Bind to multiple classes</h3>
48+
<!-- The `style.color` template binding will override any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
49+
<comp-with-host-binding [style.color]="color" dirWithStyleBinding>Some text.</comp-with-host-binding>
50+
<!-- #enddocregion source-specificity -->
4751

48-
<div [class]="someClasses">Add multiple classes</div>
49-
<!-- #enddocregion direct-class-binding -->
52+
<!-- #docregion dynamic-priority -->
53+
<h3>Dynamic vs static</h3>
5054

51-
<hr />
55+
<!-- If `classExpr` has a value for the `special` class, this value will override the `class="special"` below -->
56+
<div class="special" [class]="classExpr">Some text.</div>
5257

53-
<h2>Style binding</h2>
58+
<!-- If `styleExpr` has a value for the `color` property, this value will override the `style="color: blue"` below -->
59+
<div style="color: blue" [style]="styleExpr">Some text.</div>
5460

55-
<!-- #docregion style-binding-->
56-
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
57-
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
58-
<!-- #enddocregion style-binding -->
61+
<!-- #enddocregion dynamic-priority -->
5962

60-
<!-- #docregion style-binding-condition-->
61-
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
62-
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
63-
<!-- #enddocregion style-binding-condition-->
63+
<!-- #docregion style-delegation -->
64+
<comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
65+
<!-- #enddocregion style-delegation -->
6466

65-
<!-- #docregion direct-style-binding -->
66-
<h3>Bind to multiple styles</h3>
6767

68-
<div style="color: blue" [style]="styleExpr">Add multiple styles</div>
69-
<!-- #enddocregion direct-style-binding -->

‎aio/content/examples/attribute-binding/src/app/app.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ export class AppComponent {
99
actionName = 'Go for it';
1010
isSpecial = true;
1111
canSave = true;
12-
someClasses = 'foo bar';
13-
classExpr = 'special foo';
12+
classExpr = 'special clearance';
1413
styleExpr = 'color: red';
1514
color = 'blue';
1615
}

‎aio/content/examples/attribute-binding/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { NgModule } from '@angular/core';
33

44

55
import { AppComponent } from './app.component';
6+
import { CompWithHostBindingComponent } from './comp-with-host-binding.component';
67

78

89
@NgModule({
910
declarations: [
10-
AppComponent
11+
AppComponent,
12+
CompWithHostBindingComponent
1113
],
1214
imports: [
1315
BrowserModule

‎aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'comp-with-host-binding',
5+
template: 'I am a component!',
6+
host: {
7+
'[class.special]': 'isSpecial',
8+
'[style.color]': 'color',
9+
'[style.width]': 'width'
10+
}
11+
})
12+
export class CompWithHostBindingComponent {
13+
isSpecial = false;
14+
color = 'green';
15+
width = '200px';
16+
}

0 commit comments

Comments
 (0)