From your diagram.
One thing I am confused for the regular code flow.
Why client backend receive the auth code, and all subsequent api call (exchange token, request API data)
all sent out from client backend instead of client frontend?
If request API start from client backend, how do I pass the response to the front end page?

The client backend is the server hosting the client. If you use regular code flow you need a server to store the client secret. For public client, that can’t store secrets, you use PKCE instead as described in this post.

Hi, sure you can. The Angular apps have the access token which is an encoded JWT. It could just decode the access token and get the claims and hence do the checks.
But, normally having an API returning either a flag for whether some data was available or not. If you let the API return all the navigation links, I think you are mixing BE/FE concerns here, that will make development harder as you need to do changes on both the BE and FE to change the navigation bar.

A client BE is the BE server, that hosts the Angular app. You only need the client BE in the authorization if you use code flow without PKCE.