Angular Jobs

Today in Top Angular News – Saturday, December 1

Today in Top Angular News – Saturday, December 1

Today’s topics include angularjs, bootstrap, and JavaScript. Special thanks to contributors @tomsu, Tomek Sułkowski, 10212426438111935, Lars Gyrup Brink Nielsen, @NetanelBasal, Netanel Basal, by Rehmaanali, rehmaanalis, Angular_Plow, Paul Krill, @charleeli, Charlee Li, @bob.bumsuk.lee, Bob Lee, +Juri Strumpflohner, Juri Strumpflohner, +Aleksey Novik, Aleksey Novik, webcodegeeks, and NG_Tutorial.


Theming Angular – The Startup – Medium

With `ViewEncapsulation.Emulated`, global styles also don’t impact a descendant component.The solution
To deal with this, we are going to use CSS Custom Properties, a.k.a. CSS variables. Property names that are prefixed with –, like –example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.What it means is that you define a custom property the same way as you would a normal css property, e.g. "font-size: 16px" and it’s available to be referenced everywhere within the cascade (in the whole subtree of element that matched the selector you’ve used when defining the property.) Now, if you haven’t work with css custom properties before it takes a while to sink in (speaking from experience…), but it’s an extremely powerful tool.The important thing is not to think of them as an alternative to SASS, or Less variables — these are only calculated during compilation, so they’re static. You don’t actually have to put the custom properties [dtTheme] directly on a component, it can be applied on any HTML element in your app. The theme will be applied to everything inside:

[dtTheme]="getCustomTheme()"
dt-ptero/dt-ptero
dt-trex/dt-trex
/I’m using both custom CSS properties and SASS variables there. Continue reading


Container Components with Angular – Angular In Depth

Connect the Presentational Component Using Data Bindings
After extracting the application state integration logic, we can — for now — consider the dashboard component a presentational component and assume that it will have a heroes input property as seen in the template of the dashboard container component. Open in new tab.Data Flows Down From the Container Component
Fitting the dashboard feature into the flow diagram of Figure 1, we see how the container component is notified of heroes that it requested from the hero service through an observable. The container component is notified of the emitted hero name which it passes to the hero service and finally updates the persistent state in the container component model. Ideally, our heroes container component should not be managing persistent state itself, but rather rely on the hero service to do so — or the store in an application that uses NgRx Store. If you want to put the heroes state in the hero service where it belongs, you can extract the state management from this container component. Continue reading


What’s new in Angular v5: Animations – Netanel Basal

  • For example:br /// Animation will be disabledbr /div @.

For Example:
animations: [
trigger(
'query', [
transition(
'* = start', [
query('. disabled
error handling
Angular now throws an error when invalid CSS property is used in the animation. For example:
style({opacity: 0, tranforn: 'translateX(0)'})Will throw:
consoleNew aliases
Support for :increment and :decrement transition aliases. For example:
animations: [
trigger('slider', [
transition(":increment", group([
query(':enter', [
style({
left: '100%'
}),
animate('0.5s ease-out', style('*'))
]),
query(':leave', [
animate('0.5s ease-out', style({
left: '-100%'
}))
])
])),
transition(":decrement", group([
query(':enter', [
style({
left: '-100%'
}),
animate('0.5s ease-out', style('*'))
]),
query(':leave', [
animate('0.5s ease-out', style({
left: '100%'
}))
])
]))
])
]Follow me on Medium or Twitter to read more about Angular, Vue and JS! Continue reading


How to optimize Angular applications

  • You can create a website with dozens of pages using Angular.

Angular is the most popular framework for building single page web applications. Although i said single page but it doesn't necessarily mean that your application can contain only one page. The framework itself (latest versions) is well optimized thanks to amazing team and community, however when it comes to performance we should always think about few things that can make our application run fast and smooth. Continue reading


What’s new in Angular Version 7

  • You can download the Angular 7 release from GitHub.

Version 7.1 of Angular, Google’s popular JavaScript framework for building mobile and desktop applications, is now available, with an improvement to the framework’s router. Angular provides dependency injection, particularly useful for assembling data services for applications, along with use of an HTML template to compose components. In Angular, developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program. While considered a minor release mainly focused on bug fixes, the router in Angular 7.1 has added the mode for , meaning guards and resolvers will ignore changes to optional parameters such as query and matrix parameters. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.