httpCache not working with angular 2+ as expected

Hi I am working with the angular 7 and tyring to eanble http cache and configured as below

 $behaviors = parent::behaviors();
    $behaviors['contentNegotiator']['formats']['application/vnd.api+json'] = Response::FORMAT_JSON;
    $behaviors['rateLimiter']['enableRateLimitHeaders'] = false;
    $behaviors['cache'] =  [
        'class' => 'yii\filters\HttpCache',
        'sessionCacheLimiter' => 'public',
        'cacheControlHeader' => 'public, max-age=1800',
        'lastModified' => function ($action, $params) {
            $q = new \yii\db\Query();
            $data = $q->from('package')->max('updated_time');
            return $data;
       
        },
    ];

but the when i update record in database and load data or page in the angular section it does not show the updated data

It only show updated data either i hard reload the page or If i browse the api endpoint from the browser, after the only the data is showing in the page i am working

Following are the header response which are being sent from the server

Access-Control-Allow-Credentials: true

Cache-Control: public, max-age=1800
Content-Length: 1739
Content-Type: application/json; charset=UTF-8
Date: Fri, 05 Jul 2019 05:45:13 GMT
Last-Modified: Fri, 05 Jul 2019 04:08:32 GMT
Server: Apache/2.4.29 (Ubuntu)
Vary: Accept