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.

For such cases, we can simply create a Shared service which holds the value, which one component updates and other component binds in its view.

@Injectable()
export class MyService {
    myVal: string;
}

@Component()
export class Component1 {
    constructor(private myService: MyService) {}
    onUpdated(newVal) {
       this.myService.myVal = newVal;
    }
}

@Component() {
export class Component2 implements OnInit {
  myVal: string;
  constructor(private myService: MyService) {}
  ngOnInit() {
    this.myVal = this.myService.myVal;
  }
}