Async Pipes help transforming data coming from an Observable and resolve into desired dataset. It also takes care of the Subscription and Unsubscription of the Observable.

this.http.get(url).pipe((map((res) => {
    // some handling of the response here
    return res;
});

• Cold Observables are observables where data is produced inside the Observable. It can be treated as a unicast.

const obs$ = new Obserable((observer) => {
    observer.next(Math.random());
});
obs$.subscribe((data) => console.log(data)); // prints different value
obs$.subscribe((data) => console.log(data)); // prints different value

• Hot Observables are observables where data is produced outside the Observable. It can be treated as a multicast.

const data = 5;
const obs$ = new Obserable((observer) => {
    observer.next(data);
});
obs$.subscribe((data) => console.log(data)); // prints 5
obs$.subscribe((data) => console.log(data)); // prints 5

Directive:

• Directives help in modifying the behavior of an existing DOM element or adding new behavior to the DOM.
• Directives are created by using the @Directive() decorator, and can be structural (which modify the DOM structure - ngIf, ngFor or ngSwitchCase) or behavioral (add new behavior to the existing DOM elements - ngStyle, ngClass or ngModel)
• Directives don't possess their own View

Component:

• Components are considered as a special branch of directives which can control a small portion of the View
• Components are associated with an encapsulated View Template, Style and the View Logic (class) parts
• These are created by using the @Component() decorator

Guards in Angular help us in controlling access to certain routes of our application, unless a criteria is matched. Angular provides the following interfaces for us to implement and create Guards for required use cases:

1. CanActivate - navigation to an individual route corresponding to a component
2. CanActivateChild - navigation to all the child routes and components of a specific route
3. CanDeactivate - guards the exit from a component route and allows on a matching criteria
4. CanLoad - lets the application lazyload all the routes of a module only if a condition is met
5. Resolve - helps in prefetching all the component data before the route is activated.

We can create by implementing the HttpInterceptor interface from @angular/common/http package. We register it to be attached to the HTTP request pipeline by adding it to the providers array in the NgModule. We can also enable DI into the interceptor by registering it as a service.

@Injectable({
    providedIn: "root"
})
export class PostsInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler)
      : Observable<HttpEvent<any>> {
        // fiddling happens here
        return next.handle(req);
    }
}
// NgModule
providers: [{
       provide: HTTP_INTERCEPTORS,
       useClass: PostsInterceptor,
       multi: true
}]

We can read an outgoing HTTP request from an angular application and modify it to always pass a particular header, such as an Authorization header carrying a token to the API by registering a HttpInterceptor. We can also make use of it to read a response before being relayed to the actual source of request. It thereby provides use cases such as Logging, Exception Handling and Headers etc.

@Injectable({
    providedIn: "root"
})
export class PostsInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler)
          : Observable<HttpEvent<any>> {
        // req object can be modified here
        return next.handle(req);
    }
}

We can make the code unreadable to some extent by means of minification and uglify, but since angular works completely on the client end, we can't completely protect the code from being exposed.