随笔分类 - Angular
摘要:If you want to reset or just update field value, you can do: reset: reset({key: value, k2:v2}); update: 1. patchValue({k: v}); update part of form fie
阅读全文
摘要:For example we have built a form: We want to reponse to each time 'stock' value changes. To do that we can subscrube 'valueChanges' for form. Notice t
阅读全文
摘要:forkJoin: When all observables complete emit the last value from each.
阅读全文
摘要:Using FormBuilder API can simply our code, for example we want to refactor following code by using FormBuilder: First thing we need to do is actually
阅读全文
摘要:'FormArray' can work with array of 'FormGroup' or 'FormControl'. So for Javascript, we have a 'form=new FormGroup()', inside formGoup, we have a 'stoc
阅读全文
摘要:First time dealing with Reactive form might be a little bit hard to understand. I have used Angular-formly for AngularJS bofore, what it does is using
阅读全文
摘要:Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, Zone will notify change detection to kick in. Imag
阅读全文
摘要:In this example, we are going to see how to use Pipe as providers inject into component. We have the pipe: We want to inject this pipe as provider to
阅读全文
摘要:For example we want to create a pipe, to tranform byte to Mb. We using it in html like: Create pipe:
阅读全文
摘要:In this post, we are going to create our own structure directive *ngFor. What it should looks like in HTML? So here, we have a '*myFor' directive. It
阅读全文
摘要:Directive ables to change component behaives and lookings. Directive can also export some APIs which enable behaivor changes control by outside direct
阅读全文
摘要:We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: Create directive: Add a HostListener when user type input: And we want
阅读全文
摘要:I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in
阅读全文
摘要:To create a dynamic template, we need to a entry component as a placeholder. Then we can use entry component to create a new Tamplete into it. As we c
阅读全文
摘要:After create a component dynamic, we are able to change the component's props and listen to its event. If we log out 'this.component.instance', we can
阅读全文
摘要:The talk from here. 1. The lifecycle in Angular component: constructor vs ngOnInit: Constructor: only used for injection. ngOnInit: for data initlizat
阅读全文
摘要:To create a component dynamicly. 1. Add a container with ref: 2. View this container as ViewContainerRef. 3. We need ComponentFactoryResolver: 4. We w
阅读全文
摘要:ElementRef: ElementRef is a way to access native html element, notice that it only works for Broswer. Render: Render helps to take care of different p
阅读全文
摘要:We can use @ViewChild with component: By doing this, we actually can access component's prop and events. If we want to get component DOM node, what we
阅读全文
摘要:When you use @ViewChildren, the value can only be accessable inside ngAfterViewInit lifecycle. This is somehow different from @ViewChild, which value
阅读全文