随笔分类 - Angular
摘要：We are going to see how to using method arguments for @HostListener. First, we can use HostListener without method arguments: It works fine. But if we
阅读全文
摘要：For example, we have a modal component, it can config that using ng-template as a configurable template. Now what we want to do is to pass in inputs t
阅读全文
摘要：Now for au-modal component, we pass in tow component though contenct projection: One is 'au-tab-panel' which contains all the content body for modal.
阅读全文
摘要：If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. Now we have a modal component, we want to click 'E
阅读全文
摘要：We have modal implement and now we want to implement close functionality. Becuase we use a structure directive to do open modal on click functionality
阅读全文
摘要：For example we have two buttons: When we click nether one of those tow button, the modal should show up: We will use structure directive to do that. S
阅读全文
摘要：We are going to have a modal component: And we can pass default modal body by content projection: So 'modal-body' will be shown by default. Now we wan
阅读全文
[Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
摘要：Here is the defulat tab header template: we have set up that we can switch the default template when we pass in another template. Now, what we want is
阅读全文
摘要：Previously we have tab-panel template defined like this: So the template is not overrideable. If we want later able to pass in a different template, w
阅读全文
摘要：Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the re
阅读全文
摘要：The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as pos
阅读全文
摘要：If sometime you want to log out the comonent html to see whether the html render correctly, you can do : If you found that some tmeplate binding doesn
阅读全文
摘要：To add alernative theme, we can use :host-context() selector from Angular. So it will apply 'border-color: red' only when host wrapper element has 'au
阅读全文
摘要：For the component's css file, we can improt two css files: common.css default-theme.css In the default theme, it contains all the default theme relate
阅读全文
摘要：The API for the store is really simple: There are two methods, set() & select(). Store: interface: Component:
阅读全文
摘要：For example you have a component, which take a trasclude input element: There is many ways to get ElementRef of the input, for example using Reference
阅读全文
摘要：Let's say you are builing a reuseable component. The style structure like this: If you want to style this input field, it can be quite easy, we can ju
阅读全文
摘要：NgZone, Angular uses it to profiling all the async actions such as setTimeout, http request and animation. For example if you dealing with heavy oprat
阅读全文
摘要：You probably have seen 'foorRoot()' method a lot inside Angular application. Creating a configurable NgModule allows us do the configuration for each
阅读全文
摘要：Unlike 'useClass', 'useExisting' doesn't create a new instance when you register your service inside ngmodule. 'useExisting' also can limit the functi
阅读全文
浙公网安备 33010602011771号