Skip to content

Commit d8841fd

Browse files
authored
Merge pull request sudheerj#2 from fahadph/master
Description added for animate function and Add new How to inject the dynamic script in angular question added
2 parents 80695e8 + c55a632 commit d8841fd

File tree

1 file changed

+64
-1
lines changed

1 file changed

+64
-1
lines changed

README.md

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
|104| [What is Style function?](#what-is-style-function)|
113113
|105| [What is the purpose of animate function?](#what-is-the-purpose-of-animate-function)|
114114
|106| [What is transition function?](#what-is-transition-function)|
115+
|107| [How to inject the dynamic script in angular?](#how-to-inject-the-dynamic-script-in-angular)|
115116

116117
1. ### What is Angular Framework?
117118

@@ -1413,11 +1414,73 @@
14131414
```
14141415
**Note:** The style attributes must be in camelCase
14151416
105. ### What is the purpose of animate function?
1417+
Angular Animations are a powerful way to implement sophisticated and compelling animations for your Angular single page web application.
1418+
1419+
```
1420+
import { Component, OnInit, Input } from '@angular/core';
1421+
import { trigger, state, style, animate, transition } from '@angular/animations';
1422+
1423+
@Component({
1424+
selector: 'app-animate',
1425+
templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
1426+
styleUrls: `.myblock {
1427+
background-color: green;
1428+
width: 300px;
1429+
height: 250px;
1430+
border-radius: 5px;
1431+
margin: 5rem;
1432+
}`,
1433+
animations: [
1434+
trigger('changeState', [
1435+
state('state1', style({
1436+
backgroundColor: 'green',
1437+
transform: 'scale(1)'
1438+
})),
1439+
state('state2', style({
1440+
backgroundColor: 'red',
1441+
transform: 'scale(1.5)'
1442+
})),
1443+
transition('*=>state1', animate('300ms')),
1444+
transition('*=>state2', animate('2000ms'))
1445+
])
1446+
]
1447+
})
1448+
export class AnimateComponent implements OnInit {
1449+
1450+
@Input() currentState;
1451+
1452+
constructor() { }
1453+
1454+
ngOnInit() {
1455+
}
1456+
}
1457+
```
14161458
106. ### What is transition function?
14171459
The animation transition function is used to specify the changes that occur between one state and another over a period of time. It accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an animate() function.
14181460
Let's take an example state transition from open to closed with an half second transition between states.
1461+
14191462
```javascript
14201463
transition('open => closed', [
14211464
animate('500ms')
14221465
]),
1423-
```
1466+
```
1467+
107. ### How to inject the dynamic script in angular?
1468+
1469+
Using DomSanitizer we can inject the dynamic Html,Style,Script,Url.
1470+
1471+
```
1472+
import { Component, OnInit } from '@angular/core';
1473+
import { DomSanitizer } from '@angular/platform-browser';
1474+
@Component({
1475+
selector: 'my-app',
1476+
template: `
1477+
<div [innerHtml]="htmlSnippet"></div>
1478+
`,
1479+
})
1480+
export class App {
1481+
constructor(protected sanitizer: DomSanitizer) {}
1482+
htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
1483+
}
1484+
```
1485+
1486+

0 commit comments

Comments
 (0)